Помощь с jquery animate()

Question

Я использую этот код для изменения непрозрачности, когда пользователь включен и выключен, к сожалению, когда пользователь нажимает на изображение, непрозрачность не остается на 1. У кого-нибудь есть ответ?

$(document).ready(function(){ 

    $('img#slide').animate({"opacity" : .7}) 
    $('img#slide').hover(function(){ 
     $(this).stop().animate({"opacity" : 1}) 
    }, function(){ 
     $(this).stop().animate({"opacity" : .7}) 

    });     


    $('img#slide').click(function(){ 
    $(this).animate({"opacity" : 1}); 
    }); 

}); 

Answer 1

Вы должны каким-то образом отключить mouseleave анимации, когда пользователь нажимает кнопку.

Общим подходом является добавление класса и проверка mouseleave на предмет наличия класса.

Тест живой пример:http://jsfiddle.net/KnCmR/

$(document).ready(function() { 

    $('img#slide').animate({ "opacity": .7 }) 

    .hover(function() { 
     $(this).stop().animate({ "opacity": 1 }) 
    }, 
    function() { 
     if (!$(this).hasClass("active")) { 
      $(this).stop().animate({ "opacity": .7 }); 
     } 
    }) 

    .click(function() { 
     $(this).addClass("active"); 
    }); 
}); 

EDIT:

Если вы хотите второй щелчок, чтобы восстановить поведение назад к оригиналу, используйте toggleClass() вместо addClass():

 $(this).toggleClass("active"); 

---

Jquery Docs:

• .hasClass() - http://api.jquery.com/hasClass
• .addClass() - http://api.jquery.com/addClass
• .toggleClass() - http://api.jquery.com/toggleClass

Answer 2

Вам просто нужно отслеживать, была ли она нажата или нет. Вы можете сделать это несколькими способами, но поскольку у вас есть только один элемент, который вы отслеживаете, переменная - это самый простой способ сделать это. Я также оптимизировал ваш код для использования цепочки. Я также сменил селектор на более эффективный. #slide лучше img#slide так как id должен быть уникальным:

$(document).ready(function(){ 
    var clicked = false; 

    $('#slide') 
    .animate({"opacity" : 0.7}) 
    .hover(function(){ 
     if(!clicked) { 
     $(this).stop().animate({"opacity" : 1}); 
     } 
    }, function(){ 
     if(!clicked){ 
     $(this).stop().animate({"opacity" : 0.7}); 
     } 
    }) 
    .click(function(){ 
     clicked = true; 
    }); 
}); 

Answer 3

Все ответы в этой теме хорошо, и будет работать. Но ради этого здесь другой подход.

На основе вашего кода и вашего вопроса, что вы на самом деле делаете, это удаление поведения наведения из элемента. Что должно быть сделано, как показано ниже:

$(document).ready(function(){ 

    $('img#slide').animate({"opacity" : .7}); 

    $('img#slide').hover(function(){ 
     $(this).stop().animate({"opacity" : 1}); 
    }, function(){ 
     $(this).stop().animate({"opacity" : .7}); 
    }); 

    $('img#slide').click(function(){ 
    $(this).unbind('hover'); 
    }); 
}); 

который может быть переработан, чтобы позволить переключая поведения новым способом:

$(document).ready(function(){ 

    var over = function(){ 
    $('img#slide').stop().animate({"opacity" : 1}); 
    }; 

    var out = function(){ 
    $('img#slide').stop().animate({"opacity" : 0.7}); 
    }; 

    var on = function(){ 
    $('img#slide').hover(over, out).one('click', off); 
    } 

    var off = function(){ 
    $('img#slide').unbind('hover').one('click', on); 
    }; 

    $("img#slide").one('click', on); 

    out.call(); 

}); 

Примечание: Я не проверял это (я на работе), Но ты получил идею.