JQuery - обратная анимация при нажатии (переключить или если/еще)

Question

Я пробовал много разных вариантов, и я уверен, что большинство из них будут работать, если бы я знал, что я делаю.

Я хочу щелкнуть мышью по изображению и сделать его крупнее и по центру на экране, затем я хочу нажать на одно и то же изображение и вернуть его в нормальное русло.

В двух отдельных сценариев ниже я стер обратный эффект, но я в основном используются функции, которые изменили настройки CSS назад width:250, height:250, and marginLeft:9%. Все, что я мог бы получить его, чтобы сделать успешно было увеличить изображение, но затем она сократилась автоматически, как только это было полностью расширен. Мне нужно увеличить функцию, а затем подождать, пока я не нажму на изображение, чтобы оно уменьшилось.

<script> 

      $('document').ready(function(){ 
       $('.hello_mom').on('click', function(){ 
        $('.lbs_lease').animate({ 
         width:"350px", 
         height:"350px", 
         zIndex:"10", 
         marginLeft:"28.4%" 
        }, 500); 
       }); 
      }); 

    </script> 

    <!--<script>//My idea with this second script was to set an initial variable that I would use to make the enlargement animation run (with an if statement) and the shrinking animation stop until the variable was changed at the end of the function. Once the variable changes the else statement would become true and run my reverse animation. However, it seems redundant when the animation still doesn't wait for another click to occur before it runs. 

     $a = 5; 
     $c = 10; 
     var b = $a; 

     if(b < $c) { 
      $('.lbs_lease').animate({ 
       width:"350px", 
       height:"350px", 
       zIndex:"10", 
       marginLeft:"28.4%" 
      }, 500)}; 

    </script>--> 

Answer 1

у вас есть 2 способа сделать это ..

1- с помощью addClass и removeClass с переходом

в CSS

.imageClicked{ 
    width:350px; 
    height:350px; 
    zIndex:10; 
    marginLeft:28.4%; 
    transition : 0.5; 
} 

Js

$('document').ready(function(){ 
    $('.hello_mom').on('click', function(){ 
     if($('.lbs_lease').hasClass('imageClicked')){ 
      $('.lbs_lease').removeClass('imageClicked'); 
     }else{ 
      $('.lbs_lease').addClass('imageClicked'); 
     } 
    }); 
}); 

2- путем сделать еще одушевленные со стилем по умолчанию и использовать логическое значение истина или ложь

$('document').ready(function(){ 
    var imgClicked = true; 
    $('.hello_mom').on('click', function(){ 
     if(imgClicked == true){ 
     $('.lbs_lease').animate({ 
         width:"350px", 
         height:"350px", 
         zIndex:"10", 
         marginLeft:"28.4%" 
     }, 500); 
     imgClicked = false; 
     }else{ 
     $('.lbs_lease').animate({ 
         //type your default style here 
     }, 500); 
     imgClicked = true; 
     } 
    }); 
}); 

Answer 2

что-то вроде этого:

var left = true; 
$('.hello_mom').on('click', function() { 
    if (left) { 
     $(this).animate({ 
      'marginLeft': "-=30px" 
     }); 
     left = false; 
    } else { 
     $(this).animate({ 
      'marginLeft': "+=30px" 
     }); 
     left = true; 
    } 
}); 

http://jsfiddle.net/e1cy8nLm/

Answer 3

Вы можете сделать что-то вроде этого: JSFiddle Demo

$('img').on('click', function(){ 
    $(this).toggleClass('enlarge'); 
}); 

CSS:

img { 

    // set the initial height and width here so we can animate these properties. 
    width:100px; 
    height:100px; 

    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out;  
} 

// toggle this class with jQuery to enlarge the img on click 
.enlarge { 
    width:200px; 
    height:200px; 
} 

Answer 4

Один из методов будет использовать функции addClass и removeClass jquery, отслеживающие текущее состояние изображения. Переменная enlarged имеет текущее состояние изображения и переключает его onclick с добавлением или удалением класса. Обратите внимание, что время перехода упоминается как для классов, так и для добавленных/удаленных, а также для исходного стиля, чтобы предотвратить резкий переход при изменении размера для обоих состояний.

Вот jsfiddle для этого: JS FIDDLE DEMO

HTML код:

<div> 
    <img class="hello_mom" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" /> 
</div> 

CSS код:

.hello_mom{ 
    width:250px; 
    height:250px; 
    background : red; 
    -webkit-transition: all 0.5s; /* Safari */ 
    transition: all 0.5s; 
} 
.hov_class{ 
    width:350px; 
    height:350px; 
    z-index:10; 
    //margin-left:28.4%; 
    -webkit-transition: all 0.5s; /* Safari */ 
    transition: all 0.5s; 
} 

JS код:

var enlarged=0; 
$('document').ready(function(){ 
    $('.hello_mom').on('click', function(){ 
     if(!enlarged){ 
      $('.hello_mom').addClass("hov_class"); 
      enlarged=1; 
     } 
     else{ 
      $('.hello_mom').removeClass("hov_class"); 
      enlarged=0; 
     } 

    }); 
}); 

Answer 5

Взгляните это http://julian.com/research/velocity/

Velocity - это javascript-анимация, выполненная быстрее, чем CSS-анимация. ... и здесь у вас также есть обратный метод