Question

我想在每次单击div时将值传递给函数参数，并在此函数中切换jQuery动画。我尝试了下面的代码，但它不起作用：

<div onclick="aboutMe(about1)"></div>

function aboutMe(x) {
    $(x).toggle(function() {
        $(x).animate({
            width: '600px'
        }, "slow");
    }, function() {
        $(x).animate({
            width: '40px'
        }, "slow");
    });
};

我该怎么办？

Answer 1

您尝试使用的切换功能签名已从源中删除。要达到您的要求，您需要检查当前宽度并相应地设置新宽度。试试这个：

$(x).click(function() {
    $(this).animate({ width: $(this).width() == 40 ? '600px' : '40px' });
});

另请注意，每次单击div并触发aboutMe()函数时，都会附加事件处理程序。如果这不是预期的行为，您应该更改代码，以便使用JS附加事件，如下所示：

<a href="#about1">About Me</a>

$('a').click(function() {
    $($(this).attr('href')).animate({ width: $(this).width() == 40 ? '600px' : '40px' });
});

Answer 2

为什么不通过Class切换它？这不是最好的答案，但你可能会考虑这个。

 var aboutMe = function(x) {
   $(x).toggleClass('short')
 };

 $(function() {
   $('#clicker').click(function() {
     aboutMe('#div1');
   });
 });

#div1 {
  height: 100px;
  width: 600px;
  background: #eee;
  text-align: center;
  transition : width 1s linear;
}

#div1.short{

   width : 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Hey</div>
<button id="clicker">Toggle</button>

Answer 3

你如何点击div？就div元素而言，它不起作用......

<label onclick="aboutMe(about1)">About Me</label>

https://jsfiddle.net/4ntzpw8z/1/

这是一个小提琴。你只需要使用不同的元素。你的功能很好。

根据文档，还没有删除切换：

http://api.jquery.com/toggle/

Answer 4

在不同的主题上看到它：stackoverflow

$(document).ready( function(){
$('#toggle-button').click( function() {
    var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
    $('#toggle').animate({ width: toggleWidth });
});

}）;

test fiddle

切换动画点击div

4 个答案: