Jquery children() 不透明动画

Question

我的问题:我是 Jquery 的新手 我试图在动画完成后将类 '.visible' 附加到 '.content' div。

每个图像 div 都包含一个图像作为覆盖物，该图像会增长以填满整个区域。

本质上，每个内容 div 都有额外的文本内容，我只想在用户单击父元素时显示这些文本内容，然后在第二次单击时随着父元素返回到原始大小而淡出。

我是这样做的，而不是试图设置一个不透明度值，因为我想让它保持跨浏览器兼容。

我尝试的解决方案:我一直在尝试使用 .children().addClass('visible') 但没有成功。我相当确定我犯了一个菜鸟错误，但在搜索 Stackoverflow 和其他网站后，我无法找到解决这种情况的答案(尽管这可能是通过我的不正确搜索)。

到目前为止的 Jquery 代码:

$(window).load(function(){
    $(".image").bind('click', function() {

        var that = $(this),
        offsets = that.position(),
        top = offsets.top,
        left = offsets.left,
        clone = that.clone(),
        parent = that.parent(),
        width = parent.width(),
        height = parent.height();

        clone.addClass('clone').appendTo(parent).css({
            'top': top,
            'left': left
        }).animate({
            'top': 0,
            'left': 0,
            'width': width,
            'height': height,
        }, 1000).click(function(){
            $(this).fadeOut().siblings().animate({
                'opacity': 1
            }, 1000);
        }).siblings().animate({
            'opacity': 0.1
        }, 1000);
    });
 });

希望我已经发布了足够的信息，但如果有帮助，我也很乐意分享 html 和 css。

相关的 CSS 类是:

  .content { 
      filter:alpha(opacity=0); 
      -moz-opacity:0; 
      -khtml-opacity:0; 
      opacity: 0; 
  }

  .visible { 
      filter:alpha(opacity=100); 
      -moz-opacity:1; 
      -khtml-opacity:1; 
      opacity: 1;
  }

  .wrap { 
      height: 725px; 
      width: 974px; 
      margin: 0 auto; 
      vertical-align: top; 
      position:  relative;
 }

 .image { 
      height: 233px; 
      width: 233px; 
      display:inline-block; 
      vertical-align: top;   
      margin: 0 11px 11px 0; 
      background-size: cover; 
      border: 1px solid #000000;
 }

如果我对我的任何问题报告不准确，我深表歉意，并在此先感谢您的帮助。

Answer 1

我已经举了一个简单的例子来说明如何做到这一点，但首先，让我们谈谈编码。

当你编码时，尝试制作小的可管理和可读的 block ，并对其进行结构化以使其有意义，并且为了上帝的爱对你正在做的事情或你会回来挠头问“这又做了什么？”。
如果这样做，出现问题时调试起来会容易得多。

现在，让我们谈谈一些小问题。
使用JQuery时，推荐使用$(document).ready(function(){...});作为您的入口点。

.bind很久以前就被弃用了，甚至是它的继任者.live现在已经被弃用了一段时间，你应该使用 .on ，但只有在 .ready 之后内容已动态添加到 DOM 时，我们才真正需要使用它。

呼，好的，既然已经解决了，下面是我的简单示例，可以帮助您朝着正确的方向前进。

---

Example |代码

Javascript

var scale_increase = 1.5,
image_fade = 500,
txt_fade = 250;

$(document).ready(function(){
    //Attach click event handler
    $(".img-container").click(function(){
        var self = $(this);

        var img = $("img", this),
            txt = $(".img-text", this);

        //Make sure we aren't animating, otherwise the image resizing will not match
        if(img.is(":animated") || txt.is(":animated")) return;

        if(self.hasClass("img-displaying")){
            //Revert back to default state
            self.removeClass("img-displaying");

            //Hide the text
            txt.animate({
                opacity: 0
            }, txt_fade, function(){
                //After the text has been hidden, make the image smaller
                img.animate({
                    width: parseInt(img.prop("width"))/scale_increase,
                    height: parseInt(img.prop("height"))/scale_increase
                }, image_fade);
            });
        }else{
            //Make picture larger and show the text
            self.addClass("img-displaying");

            //Make the image bigger
            img.animate({
                width: parseInt(img.prop("width"))*scale_increase,
                height: parseInt(img.prop("height"))*scale_increase
            }, image_fade, function(){
                //After it's grown, show the text
                txt.animate({
                    opacity: 1
                }, txt_fade);
            });
        }
    });
 });

HTML

<div class='img-container'>
    <img src="http://images.wisegeek.com/young-calico-cat.jpg" width="200" height="156" />
    <div class='img-text'> This is a cute kitty I want to cuddle with! :)</div>
</div>

<div class='img-container'>
    <img src="http://images.wisegeek.com/young-kittens.jpg" width="200" height="148" />
    <div class='img-text'> Oh dear, they're SO adorable!</div>
</div>

CSS

.img-text{
    text-align: left;
    font-style: italic;
    opacity: 0;
    width: 100%;
}

---

引用文献(按出现顺序)

• > $(document).ready(function(){...});
• > .click(...)
• > .is(...)
• > :animated selector
• > .hasClass(...)
• > .removeClass(...)
• > .animate(...)
• > .prop(...)
• > .addClass(...)