有两个单独的Javascript作为一个吗？

在我的HTML中，我有以下几张图片：

<img class="gallery_left" id="left4" src="assets/community/fall_regionals/img01.png" />

我发现类gallery_left的JavaScript首先执行，然后是ID left4。在某些情况下，它们将同时执行（或至少看起来是），但在鼠标移出时，图像将在一个动作（类）中收缩90%的时间，然后在另一个动作（ID）中向下移动。我发现这对我的很多图片来说都是一个大问题。有什么方法可以让我把它清理干净一点，让它更容易解决问题吗？此外，建议只为每个单独的图像创建一个特定的类来“组合”这两个单独的动作是不可能的，因为这样会有太多的类。感谢您的帮助！谢谢

试试这个：

---

为什么你需要这两个动作？你的代码是做什么的？你有不同ID的图像吗，比如left4？我有一个图像库，有10多行图像，每行3个图像。我有gallery_left、gallery_center和gallery_right类，用于在每行的左侧、中间和右侧显示图像。我专门为每一行指定边距顶部的ID，这样当有人悬停在图像上时，图像会上下成比例地增长。然后，我的答案应该适用于您……正如我前面所说，JavaScript对我来说几乎是陌生的，但不幸的是，我实际上不得不将其用于IE

$(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');

        });

    });

$(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');
        }
    });
});