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%;
}

Jquery children（）不透明度动画

1 个答案:

Example |代码

参考文献（按出现顺序）