Jquery - 单击时的反向动画（切换或 if/else）

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

你有两种方法可以做到这一点..

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- 通过使用默认样式制作另一个动画并使用布尔值 true 或 false

$('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变量具有图像的当前状态，并在单击时通过添加或删除类来切换它。 请注意，这两个类都提到了过渡时间，添加/删除以及原始样式类，以防止在调整大小到两种状态时突然过渡。

这是一个 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 动画制作得更快。 ...在这里你也有一个反向方法