Помогите с jquery animate () - PullRequest
Новая
       1

Помогите с jquery animate ()

3 голосов
/ 17 июня 2010

Я использую этот код для изменения непрозрачности, когда пользователь включает и выключает изображение, к сожалению, когда пользователь щелкает изображение, прозрачность не остается равной 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});
  });

});

Ответы [ 3 ]

2 голосов
/ 17 июня 2010

Вам нужно как-то отключить анимацию 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:

1 голос
/ 17 июня 2010

Вам просто нужно отследить, нажали ли они или нет. Вы можете сделать это несколькими способами, но так как у вас есть только один элемент, который вы отслеживаете, переменная является самым простым способом сделать это. Я также оптимизировал ваш код, чтобы использовать цепочку. Я также изменил ваш селектор, чтобы быть более эффективным. #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;
    });
});
0 голосов
/ 17 июня 2010

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

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

$(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();

 });

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

...