切换图片宽度

Question

我正在尝试制作一个带有一些图片的网页，你可以点击这些图片，然后展开。第二次点击后，它们也必须缩小。我是Jquery的新手，问题是当我点击图像时，它会消失。

这是代码

$(document).ready(function(){    
   $(".imgclass").click(function(){    
    $(this).toggle(function()
       {$(this).animate({width: "400px"});},
        function()
       {$(this).animate({width: "120px"});
});
});
});

Answer 1

如果您希望得到相同的代码，请检查此代码。你只需要toggle类

$(document).ready(function(){    
   $(".fotoklein").click(function(){    
    $(this).toggleClass('animate');
});
});

.fotoklein{
  width:100px;
  height:100px;
  background:#777;
  color:#fff;
  line-height:100px;
  text-align:center;
  -transition-duration:0.5s;
  -webkit-transition-duration:0.5s;
}
.animate{
  width:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fotoklein">Click me</div>

Answer 2

您误解了toggle()函数的作用。jQuery的toggle((只是显示和隐藏元素。你需要这样的东西：

var big = false;
$(".imgclass").click(function(){    
    if (big) {
        $(this).animate({width: "120px"});
        big = false;
    } else {
        $(this).animate({width: "440px"});
        big = true;
    }
});

然而，在Hitesh Misro的解决方案中使用类似的类会更好。

Answer 3

如果您想将相同的样式应用于不同的图像，请将id="fotoklein"更改为class="fotoklain"。

$(document).ready(function () {
        var small={width: "120px",height: "120px"};
        var large={width: "400px",height: "400px"};
        var count=1; 
        $("#fotoklein").css(small).on('click',function () { 
            $(this).animate((count==1)?large:small);
            count = 1-count;
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="fotoklein" class="small" src="https://pbs.twimg.com/profile_images/657703841085935616/EulXOwHD.png">

希望这对你有帮助。。

Answer 4

var flag = false;
$('.foo').click(function() {
    if($(this).hasClass('focus')) {
       $(this).animate({width: '-=2em'}, 300).removeClass('focus');
        flag = false;
    }
    else {
        if(!flag) {
            $(this).animate({width: '+=2em'}, 300).addClass('focus');
            flag = true;
        }
    }
});

.foo{
 color: #FFF;
 cursor: pointer;
 background: #456;
 height: 2em;
 margin: .5em;
 width: 4em;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="foo">Click</div>
<div class="foo">Me</div>