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

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

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

现在，让我们谈谈一些小问题。
使用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(...)