Question

我正在使用可从此处访问的codepen创建一个部分：Click Here

如果你看到我的代码，你会看到我每次重复同样的事情，现在想要改进我的JS，以便它更少并且表现良好。请提供建议，以便改进此代码。

提前致谢。

的问候，
IMMAD

//这是Js

$(".div1").on({
    mouseenter: function() {
        console.log('hello');
        $('.div2, .div3').addClass('widthlow');
        $('.div1').addClass('widthmax');
        $(".widthmax p").addClass('opacity');
    },
    mouseleave: function() {
        $('.div2, .div3').removeClass('widthlow');
        $('.div1').removeClass('widthmax');
        $('.div1 p').removeClass('opacity');
    }
});

$(".div2").on({
    mouseenter: function() {
        console.log('hello');
        $('.div1, .div3').addClass('widthlow');
        $('.div2').addClass('widthmax');
        $('.smoky').addClass('opacity');
    },
    mouseleave: function() {
        $('.div1, .div3').removeClass('widthlow');
        $('.div2').removeClass('widthmax');
        $('.smoky').removeClass('opacity');
    }
});

$(".div3").on({
    mouseenter: function() {
        console.log('hello');
        $('.div1, .div2').addClass('widthlow');
        $('.div3').addClass('widthmax');
        $('.smoky').addClass('opacity');
    },
    mouseleave: function() {
        $('.div1, .div2').removeClass('widthlow');
        $('.div3').removeClass('widthmax');
        $('.smoky').removeClass('opacity');
    }
});

Answer 1

我添加了一点不透明度动画，并在此处将过渡更改为ease-in-out。看起来好一点？ http://codepen.io/anon/pen/oZaoZx

关于类更改和段落转换延迟的jQuery转换

1 个答案: