[英]jQuery toggling an animation (with an image too)
I want to toggle two separate properties on a click event: 我想在click事件上切换两个单独的属性:
1) An image within a div - toggling the src
attribute 1)div中的图像-切换
src
属性
2) The absolute positioning of the div - toggling the animate("top":"0px")
bit 2)div的绝对位置-切换
animate("top":"0px")
位
Here's the HTML 这是HTML
<div id="emailme">
<a id="email" href="mailto:xxx@gmail.com">xxx@gmail.com</a>
<div id="emailmecopy">email me</div>
<img id="emaildown"src="images/downbutton.png">
</div>
Now I've sorted the src toggling, but can't work out how to toggle the animation bit: 现在,我已经对src切换进行了排序,但是无法弄清楚如何切换动画位:
$("#emailme img").on({
'click': function() {
var src = ($(this).attr('src') === 'images/downbutton.png')
? 'images/upbutton.png'
: 'images/downbutton.png';
$(this).attr('src', src); //THIS TOGGLES THE IMAGE SRC
//BUT WHAT DO I PUT HERE TO TOGGLE ANIMATE BETWEEN ("top":"0px") and
//("top":"-50px") IN THE SAME CLICK??
}
});
Any help much appreciated! 任何帮助,不胜感激!
If you refactor your code a bit you can do it like this. 如果您稍微重构代码,可以这样做。 I suppose this is what you were looking for...
我想这就是你想要的...
$("#emailme img").on({
'click': function() {
var $this = $(this);
var src = $this.attr('src');
var isUp = src === 'images/upbutton.png';
var newSrc = 'images/'+ (isUp ? 'downbutton' : 'upbutton') +'.png';
$this.attr('src', newSrc)
.animate({ top: (isUp ? '-50' : '0') +'px' });
}
});
if($("#emailme img").css('top') == '0px'){
$("#emailme img").stop().animate({top:'-50px'},1000);
};
if($("#emailme img").css('top') == '-50px'){
$("#emailme img").stop().animate({top:'0px'},1000);
};
also check this out: 还检查一下:
$('body').on('click', '#emailme img', function (e){
$(this).attr('src', $(this).attr('src')=='images/downbutton.png'?'images/upbutton.png':'images/downbutton.png');
if($(this).css('top') == '0px'){
$(this).stop().animate({top:'-50px'},1000);
};
if($(this).css('top') == '-50px'){
$(this).stop().animate({top:'0pg'},1000);
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.