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万行代码）并且使用了大量的脚本和调用......这真是一团糟...并且因为混乱函数调用将无法在我的调用控件中工作，这是在updatepanel内部:(这就是我想要内联脚本的原因。我还需要切换图像更大/更小...不仅仅是make它更大。

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

当然，您必须使用适合您浏览器的关键帧变体（ @ - webkit-keyframes ， @ - ms-keyframes ， @ - webkit-keyframes 等），或者所有这些都是最好的。

再次，这是假设这是你想要实现的，如果没有，请详细说明你的实际目标。希望它有所帮助。

修改

根据您的上一条评论：

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

这有点“僵硬”，但也许它可以作为更精细解决方案的基础，希望你能得到这个想法。

切换内部onclick

1 个答案: