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 with transition

在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;
    }
});

ROOT

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

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

5 个答案: