切换动画类并释放所有其他类

时间:2011-07-28 23:13:21

标签: jquery

我找不到专门针对此的帖子(虽然我确定它存在且我找不到它。)

我拥有它,因此图片.regularpic会切换整个特定div #title,以便在点击时显示。有没有更有效的方法让我的代码重置其他类而没有所有这些行?

HTML就是这样:

<img src="images/wordpress.png" alt="" class="regularpic first" />
<img src="images/google.png" alt="" class="regularpic second"  />
<img src="images/html5.png" alt=""  class="regularpic third" />
<img src="images/adobe.png" alt=""  class="regularpic fourth" />
<img src="images/jquery.png" alt=""  class="regularpic fifth" />

THE JQUERY是这样的:

$(function() {
$(".first").click(
    function() {
    $(".second, .third, .fourth, .fifth").stop().animate({opacity:0.4 }, 500);
    $(".first").stop().animate({opacity:1.0 }, 500);
    $("#title2, #title3, #title4, #title5").stop()
                                           .animate({opacity:0.0, 
                                                     backgroundColor: '#fff',
                                                     color: '#fff',width: 580,
                                                     height:50}, 200);
        $("#title1").stop().animate({opacity:1.0, 
                                     backgroundColor: '#fff', 
                                     color: '#000', width: 580, 
                                     height: 300 }, 600);
                });
});
$(function() {
$(".first").click(
    function() {
    $(".first, .third, .fourth, .fifth").stop().animate({opacity:0.4 }, 500);
    $(".second").stop().animate({opacity:1.0 }, 500);
    $("#title1, #title3, #title4, #title5").stop()
                                           .animate({opacity:0.0, 
                                                     backgroundColor: '#fff',
                                                     color: '#fff',width: 580,
                                                     height:50}, 200);
        $("#title2").stop().animate({opacity:1.0, 
                                     backgroundColor: '#fff', 
                                     color: '#000', width: 580, 
                                     height: 300 }, 600);
                });
});

必须有一种更有效的方法吗?

2 个答案:

答案 0 :(得分:1)

这可以为你做到:

HTML:

<img src="src" onClick="mypic('title1')" class="regularpic title1" />
<img src="src" onClick="mypic('title2')" class="regularpic title2" />

    ...

<img src="src" onClick="mypic('title5')" class="regularpic title5" />

JQuery:

var current = null;
function mypic(id) {
    $('.regularpic').stop().animate({opacity:1.0 }, 500, function(){
        $('.title').stop().animate({ opacity:0.0, 
                                     color: '#fff', 
                                     height:50}, 500, function(){
            if(current !== id){
                current = id; 
                $('.'+id).stop().animate({opacity:0.7 }, 500);
                $("#"+id).stop().animate({opacity:1.0, 
                                          color: '#000', 
                                          height: 300 }, 500);

            }
        });
    });
};

DEMO:

http://jsfiddle.net/uEjct/4/

希望它有所帮助。

编辑:

您需要添加一个公共类:

#title1,#title2,#title3,#title4,#title5

在示例中:class="title"

答案 1 :(得分:0)

在动画之前使用stop()方法然后如果动画在元素上运行它将停止。

     function() {
        $(".first").stop().animate({opacity:0.7 }, 500);
        $("#title1").stop().animate({opacity:1.0, backgroundColor: '#fff', color: '#000', width: 580, height: 300 }, 500);
                },

        function() {
        $("#title1").stop().animate({opacity:0.0, backgroundColor: '#fff', color: '#fff', width: 580, height:50}, 500);
                }