在 onclick 内切换

Question

我正在研究如何在 img 标签的 onclick 中放置一个切换按钮。

即

<img src="..." onclick="IWANTITHERE" />

没有像这样使用事件处理程序...

$('img').toggle(function()
    {$(this).animate({width: '400px'}, 'slow');},
    function()
    {$(this).animate({width: '120px'}, 'slow');
});

下面有一些奇怪的副作用，比如通过单击鼠标一遍又一遍地执行动画...

<img src="..." onclick="$(this).toggle(function()
    {$(this).animate({width: '400px'}, 'slow');},
    function()
    {$(this).animate({width: '120px'}, 'slow');
});" />

更新：我在使用非内联函数时遇到的问题是该站点非常庞大（大约 150 万行代码）并使用大量脚本和调用。 . 这真是一团糟......而且由于混乱函数调用在我调用的控件中不起作用，它位于更新面板内:(这就是为什么我想要一个内联脚本。我还需要将图像切换得更大/更小。 .. 不仅仅是让它变大。

UPDATE2：我目前正在求助于在 img 标签中使用基本的 onmouse 事件……但是当然这只是与鼠标交互的切换……

<img src='...' onmouseover="$(this).animate({width: '400px', height: '400px'}, 'slow');" onmouseout="$(this).animate({width: '120px', height: '120px'}, 'slow');">;

Answer 1

看，我假设您想要的是在触发 onclick 事件时执行调整大小动画。如果是这样我建议：

//html
<img id="id" src="..."/>

//js
<script>
      $('#id').on('click', function (){
          $(this).addClass('resize');
      })
</script>

//css
.resize{
    -moz-animation: risezeFunction 0.8s alternate infinite ease 0s;
}

@-moz-keyframes risezeFunction {
    to {
        width: 400px;
    }
    from {
        width: 120px;
    }
}

当然你必须使用适合你浏览器的 keyframes 变体(@-webkit-keyframes, @-ms-keyframes, @-webkit-keyframes, etc), or all of them would be the best.

同样，这是假设这就是您想要实现的目标，如果不是，请详细说明您的实际目标。希望对你有帮助。

编辑

根据您最后的评论：

onclick="
if($(this).css('width') === '400px'){
    $(this).animate({
    width: '120px'}, 'slow');
}
else {
    $(this).animate({
    width: '400px'}, 'slow');
}"

这有点 "stiff" 但也许它可以作为更详尽的解决方案的基础，希望你能理解。

在 onclick 内切换

Toggle inside onclick

jquery

onclick