jquery - الماوس فوق -> تتلاشى في / خارج / / انقر فوق -> العتامة 100٪ // انقر فوق -> العتامة 60

Question

أنا أعمل على موقع على شبكة الإنترنت مع مسج ومبهجة.

عند تحميل الصفحة، يجب أن تكون جميع الصور المصغرة في 60٪ من العتامة. بمجرد أن تذهب مع الماوس فوق الإبهام، يجب أن تتلاشى إلى 100٪، إذا انتقلت مع الماوس الخاص بك، يحتاج الصورة المصغرة إلى التلاشي مرة أخرى على 60٪ من العتامة.

عند النقر فوق المستخدم على صورة مصغرة، يجب أن تبقى في 100٪ من العتامة. بمجرد النقر فوق المستخدم على صورة مصغرة أخرى يجب أن تتلاشى المصغرة "القديمة" مرة أخرى إلى 60٪ و "جديد" يجب أن يبقى المرء عند 100٪. (يحتوي بالفعل على عتامة 100٪ لأنك تذهب مع الماوس الخاص بك عليها).

هذا هو الرمز الذي لدي حتى الآن:

$(window).bind("load", function() {
$("#mycarousel li").fadeTo(1, 0.6);

$("#mycarousel li").hover(function(){
    $(this).fadeTo(350, 1.0);
    $(this).addClass('Active');
    },function(){
    $("this:not('.Active')").fadeTo(350, 0.6);
});
});

سيكون موضع تقدير أي مساعدة.

greatings، bas.

Answer 1

$(window).bind("load", function() {
    var activeOpacity   = 1.0,
        inactiveOpacity = 0.6,
        fadeTime = 350,
        clickedClass = "selected",
        thumbs = "#mycarousel li";

    $(thumbs).fadeTo(1, inactiveOpacity);

    $(thumbs).hover(
        function(){
            $(this).fadeTo(fadeTime, activeOpacity);
        },
        function(){
            // Only fade out if the user hasn't clicked the thumb
            if(!$(this).hasClass(clickedClass)) {
                $(this).fadeTo(fadeTime, inactiveOpacity);
            }
        });
     $(thumbs).click(function() {
         // Remove selected class from any elements other than this
         var previous = $(thumbs + '.' + clickedClass).eq();
         var clicked = $(this);
         if(clicked !== previous) {
             previous.removeClass(clickedClass);
         }
         clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
     });
});