Question

old demo

Latest DEMO intermadiate issue

On Hover iam计算div的当前高度并通过jquery添加50px。在MouseOut当前高度未应用

例如：

currentHeight = 20px（此高度将是动态的）

AddHeight = 50px

因此鼠标悬停时div将为70px

当我的mouseOut currentHeight应该是相同的，即20px（这个高度将是动态的）

JS CODE：

txt__mouse__hover : function(){
                $(".itemMasTxt").hover(function () {
                    currentHeight = $(this).height();
                    addHeight = 50;
                    $(this).animate({
                        height:(currentHeight + addHeight)
                    }, 200);


                }, function () {            
                    alert(" --" + currentHeight)    
                    $(this).animate({
                        height:(currentHeight)
                    }, 200);
                });

Answer 1

检查DEMO

   var counter = 0;
   $(".itemMasTxt").hover(function () {
          if(innterText !== $(this)[0].innerText){
                counter = 0;
          }
          if(counter == 0){
               innerHeight = $(this).innerHeight();
               innerHeightAdd = $(this).innerHeight() + addHeight;
               innterText = $(this)[0].innerText;
          }
          counter++;
          $(this).stop().animate({
            height:(innerHeight + addHeight)
          }, 200);

    }, function () {
          $(this).stop().animate({
                height:(innerHeightAdd - addHeight)
          }, 200);
    });

Answer 2

<强> JS

(function($) {
    $(function(){

        var container = document.querySelector('.masonry-container');
        var msnry = new Masonry( container, {
        itemSelector: '.itemMas',
        columnWidth: 15,
        gutter : 1
        });



        var masonrySupport = ({
            large__videos__support : function(){
                $('.masonry-container .largeRec').find('.itemMasVideo').parent().addClass('item_largeRec_video_height');
            },
            smallRec__videos__support : function(){
                $('.masonry-container .smallRec').find('.itemMasVideo').parent().addClass('item_smallRec_video_height');
            },
            smallSquare__videos__support : function(){
                $('.masonry-container .smallSquare').find('.itemMasVideo').parent().addClass('item_smallSquare_video_height');
            },
            largeSquare__videos__support : function(){
                $('.masonry-container .largeSquare').find('.itemMasVideo').parent().addClass('item_largeSquare_video_height');
            },
            txt__mouse__hover : function(){
                $(".itemMasTxt").hover(function () {
                    currentHeight = $(this).height();
                    console.log(currentHeight);
                    addHeight = 50;
                    $(this).animate({
                        height:(currentHeight + addHeight)
                    }, 200);


                }, function () {            
                    console.log("2 - - - " + currentHeight) 
                    $(this).animate({
                        height:(addHeight)
                    }, 200);

                });


                },
            init : function(){
                this.large__videos__support(),
                this.smallRec__videos__support(),
                this.smallSquare__videos__support(),
                this.largeSquare__videos__support(),
                this.txt__mouse__hover()
            }
        })
        masonrySupport.init();


    })
})(jQuery);

DEMO

<强> CSS

.itemMasTxtPara {
 padding:15px !important;   \\For saving time i made it important but u select the appropriate class and remove it
}

.itemMasTxt{
    padding:0px !important;  \\For saving time i made it important but u select the appropriate class and remove it
}

注意到Div的填充导致了问题。

DEMO

Mouse Out Orange Div＆＃34; CurrentHeight＆＃34;没有申请

2 个答案: