鼠标退出橙色分区"CurrentHeight"不适用

Question

旧演示

最新DEMO中间问题

在Hover上，iam计算div的当前高度，并通过jquery添加50px。鼠标上当前高度外未应用

例如：

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

AddHeight=50px

因此鼠标悬停上的div将为70px

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

JS代码：

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);

演示

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的注释填充导致了问题。

演示