CODEWITHSUNDEEP
jquery
JayDee
JayDee

Reputation: 1643

Is there a way to shorten this jQuery script?

I'm new to jQuery, and I've coded this to fade out three thumbnails when hovering over the remaining thumbnail. It just seems messy, and I'm interested to know if there was a way to code this in a cleaner way to improve my knowledge of selectors and identifiers. Many thanks to anyone who posts! 

<script type="text/javascript">
    $(function() {  
        $(".christmas-list-1,").css("opacity","1.0");
        $(".christmas-list-1").hover(
            function () {
                $(".christmas-list-2,.christmas-list-3,.christmas-list-4").stop().animate({ opacity: 0.5 }, "fast");
            },
            function () {
                $(".christmas-list-2,.christmas-list-3,.christmas-list-4").stop().animate({ opacity: 1.0 }, "fast");
            }
        );

        $(".christmas-list-2,").css("opacity","1.0");
        $(".christmas-list-2").hover(
            function () {
                $(".christmas-list-1,.christmas-list-3,.christmas-list-4").stop().animate({ opacity: 0.5 }, "fast");
            },
            function () {
                $(".christmas-list-1,.christmas-list-3,.christmas-list-4").stop().animate({ opacity: 1.0 }, "fast");
            }
        );

        $(".christmas-list-3,").css("opacity","1.0");
        $(".christmas-list-3").hover(
            function () {
                $(".christmas-list-1,.christmas-list-2,.christmas-list-4").stop().animate({ opacity: 0.5 }, "fast");
            },
            function () {
                $(".christmas-list-1,.christmas-list-2,.christmas-list-4").stop().animate({ opacity: 1.0 }, "fast");
            }
        );

        $(".christmas-list-4,").css("opacity","1.0");
        $(".christmas-list-4").hover(
            function () {
                $(".christmas-list-1,.christmas-list-2,.christmas-list-3").stop().animate({ opacity: 0.5 }, "fast");
            },
            function () {
                $(".christmas-list-1,.christmas-list-2,.christmas-list-3").stop().animate({ opacity: 1.0 }, "fast");
            }
        );
    });
</script>

Upvotes: 0

Views: 109

Answers (4)

adeneo
adeneo

Reputation: 318202

$(function() {  
    var elms = ".christmas-list-1, .christmas-list-2, .christmas-list-3, .christmas-list-4";
    $(elms).css("opacity", "1").hover(
        function () { $(elms).not($(this)).stop().animate({ opacity: .5 }, "fast"); },
        function () { $(elms).not($(this)).stop().animate({ opacity: 1  }, "fast"); }
    );
});

Upvotes: 2

Galled
Galled

Reputation: 4206

You are calling to many times to the function $. Try to avoid it (read the point 4 of this article).

I think you can do something like this:

<script type="text/javascript">
$(function() {

var arrJChr = {};

    for(i=1;i<=4;i++){
        arrJChr[i] = $(".christmas-list-"+i);
    }
    var animateFun = function(idNot, nOpacity){
        for(i=1;i<=4;i++){
            if(i!=idNot){
                arrJChr[i].stop().animate(
                    { opacity: nOpacity }, 
                    "fast"
                );
            }
        }
    };

    for(i=1;i<=4;i++){
        arrJChr[i].css("opacity","1.0");
        arrJChr[i].hover(function(){
            animateFun(i,0.5);
        },function(){
            animateFun(i,1.0);
        });
    }

});
</script>

Upvotes: 0

Nate B
Nate B

Reputation: 6356

Don't give them separate class names, just use .christmas-list for all 4:

$(".christmas-list").css("opacity","1.0").hover(function() {
   $(this).siblings(".christmas-list").stop().animate({opacity: 1.0}, "fast");
}, function() {
   $(".christmas-list").stop().animate({opacity: 1.0}, "fast");
});

Upvotes: 6

cowls
cowls

Reputation: 24334

Have you thought about using fadeOut http://api.jquery.com/fadeOut/ alongside a for loop.

Upvotes: 0

Related Questions