[英]Have two separate JavaScripts act as one?
在我的HTML中,我有几张这样的图片:
<img class="gallery_left" id="left4" src="assets/community/fall_regionals/img01.png" />
该图像具有一个类和一个ID。 我还为类gallery_left和ID left4提供了JavaScript:
$(function() {
$('img.gallery_left').mouseover(function(){
$(this).animate({
borderWidth: '10px',
width: '750px',
height: '500px',
marginLeft: '1px',
zIndex: '15'}, 'default');
});
$('img.gallery_left').mouseout(function(){
$(this).animate({
borderWidth: '4px',
width: '300px',
height: '200px',
marginLeft: '1px',
zIndex: '0'}, 'default');
});
$('#left4').mouseover(function(){
$(this).animate({
marginTop: '105px'}, 'default');
});
$('#left4').mouseout(function(){
$(this).animate({
marginTop: '261px'}, 'default');
});
});
我发现首先执行了gallery_left类的JavaScript,然后执行了ID left4。 在某些情况下,它们将同时执行(或至少看起来执行),但是在鼠标移开时,图像将在一个动作(类)中缩小90%的时间,然后在另一个动作(类)中向下移动。 我发现这对我的许多图像来说都是一个大问题。 有没有办法我可以稍微清理一下以使其更无问题? 另外,建议只为每个单独的图像创建一个特定的类来“组合”这两个单独的动作也是不可能的,因为那样会导致太多的类。 任何帮助表示赞赏! 谢谢!!
试试这个: 现场演示
$(function() {
var margin_top;
$('img').mouseover(function(){
if($(this).hasClass('gallery_left')) {
if($(this).attr('id') == "left4") {
margin_top = '105px';
} else {
$(this).css('marginTop');
}
$(this).animate({
borderWidth: '10px',
width: '750px',
height: '500px',
marginLeft: '1px',
zIndex: '15',
marginTop: margin_top,
},
'default');
} else if($(this).hasClass('gallery_right')) {
if($(this).attr('id') == "right6") {
margin_top = '105px';
} else {
$(this).css('marginTop');
}
$(this).animate({
borderWidth: '10px',
width: '750px',
height: '500px',
marginLeft: '199px',
zIndex: '15',
marginTop: margin_top,
},
'default');
}
});
$('img').mouseout(function(){
if($(this).hasClass('gallery_left')) {
if($(this).attr('id') == "left4") {
margin_top = '261px';
} else {
$(this).css('marginTop');
}
$(this).animate({
borderWidth: '4px',
width: '300px',
height: '200px',
marginLeft: '1px',
zIndex: '0',
marginTop: margin_top,
},
'default');
} else if($(this).hasClass('gallery_right')) {
if($(this).attr('id') == "right6") {
margin_top = '261px';
} else {
$(this).css('marginTop');
}
$(this).animate({
borderWidth: '4px',
width: '300px',
height: '200px',
marginLeft: '661px',
zIndex: '0',
marginTop: margin_top,
},
'default');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.