让两个独立的JavaScripts作为一个

Have two separate JavaScripts act as one?

本文关键字：一个 JavaScripts 独立 两个      更新时间：2023-09-26

在我的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%的时间，然后在另一个操作中下移（ID）。我发现这对我的许多图像来说都是一个大问题。有没有办法我可以稍微清理一下，让它更没有问题？此外，建议只为每个单独的图像创建一个特定的类来"组合"两个单独的动作是不可能的，因为这将是太多的类。感谢您的帮助！谢谢

试试这个：实时演示

$(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');
        }
    });
});
相关文章：