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

如果您想为不同的图片应用相同的样式，请更改id =＆＃34; fotoklein＆＃34; to class =＆＃34; fotoklein＆＃34;

＆＃13;

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

＆＃13;

<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">

＆＃13;

希望这会对你有帮助..

Answer 3

你误解了toggle()函数的功能。 jQuery's toggle()只显示和隐藏元素。你需要这样的东西：

var big = false;

$(".imgclass").click(function(){    

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

});

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

切换图片宽度

3 个答案: