Question

我用jQuery做了一个自定义悬停效果。但它并不总能顺利运行。我想经常在多个按钮和div上使用它。我不是那个专业的jQuery，所以我认为这段代码可以更高效，更干净。

它做了什么，它创建了两个div，它们被CSS（clip-path）转换成半个正方形（三角形）。这两个三角形得到您悬停的元素的outerWidth()和outherHeight()。三角形位于悬停元素之外，因此它们可以滑入。当您将鼠标悬停时，三角形将滑出，然后将被删除。然后会重置outerWidth()和outerHeight()。

我把它放在jsfiddle上。

https://jsfiddle.net/6uuh0ha7/5/

HTML

<div class="effect position">

CSS

    .position{
            left: 100px;
            top: 100px;
            width: 100px;
            height: 100px;
            border: solid 1px;
    }

    .effect .first {
           opacity: 0;
           width: 100%;
           height: 100%;
           background-size: cover;
           -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
           clip-path: polygon(0 0, 0% 100%, 100% 100%);
    }


    .effect:hover .first {
           width: 100%;
           height: 100%;
           background-size: cover;
           -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
            clip-path: polygon(0 0, 0% 100%, 100% 100%);
    }

    .effect .second {
           opacity: 0;
           width: 100%;
           height: 100%;
           background-size: cover;
           -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
           clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

    .effect:hover .second {
           /*opacity: 1;*/
           width: 100%;
           height: 100%;
           background-size: cover;
           -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
           clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

    .effect {
           overflow: hidden;
           position: relative;
           text-align: center;
           cursor: default;
    }

    .effect .mask{
           position: absolute;
           overflow: hidden;
           top: 0;
           left: 0;
    }

Jquery的

jQuery( document ).ready(function( $ ) {

    $( ".effect" ).hover( function() {
            $(".first", this).finish();
            $(".second", this).finish();

            $colorRed = "#ff0000";
            $colorDarkRed = "#930000";

            $(this).append('<div class="mask first temp" style="background-color:' + $colorRed + ';"></div>');
            $(this).append('<div class="mask second temp" style="background-color:' + $colorDarkRed + ';"></div>');


            $width  = $(this).outerWidth() + 'px';
            $height = $(this).outerHeight() + 'px';

            $( ".first", this ).css({"left" : $width, "top" : $height});
            $( ".second", this ).css({"left" : "-" + $width, "top" : "-" + $height});


            $( ".first", this ).css({"opacity" : "1"});
            $( ".second", this ).css({"opacity" : "1"});

            $( ".first", this ).filter(':not(:animated)').animate({
                top: "-0",
                left: "-0"
            }, 200, function() {
                // Animation complete.
            });

            $( ".second", this ).filter(':not(:animated)').animate({
                top: "+0",
                left: "+0"
            }, 200, function() {
                // Animation complete.
            });

        },
        function() {            
            $( ".first", this ).animate({
                top: "+" + $height,
                left: "+" + $width
            }, 200, function() {
                $( ".first", this ).css({"opacity" : "0"});
            });

            $( ".second", this ).animate({
                top: "-" + $height,
                left: "-" + $width
            }, 200, function() {
                $( ".second", this ).css({"opacity" : "0"});
            });

        $('.temp').animate({opacity: 0 },
            'fast', // how fast we are animating
            'linear', // the type of easing
        function() { // the callback
            $(this).remove();
        });

        $width = undefined;
        $height = undefined;
    });

});

提前谢谢。

Answer 1

你必须添加.effect类的css，即

.effect{
  min-height:100px
}

需要帮助优化jQuery功能（悬停效果）

1 个答案: