2014-08-27 11 views
0

我一直在試圖擴大使用砌體。 這個想法是,當用戶將鼠標懸停在一個盒子(div)上並等待該div 2秒鐘時,該腳本應該調用一個可以擴展div的函數。jQuery settimeout()無法正常工作

它的全部工作除了腳本不等待2秒鐘,但立即執行該功能。 我在尋找更多關於setTimeOut()函數的信息。但我相信我已經正確實施了它。有人可以幫幫我嗎?

HTML:

<!DOCTYPE html> 
<html class=''> 
    <head> 
     <meta charset='UTF-8'> 
     <meta name="robots" content="noindex"> 
     <link rel="stylesheet" type="text/css" href="responsive_masonry.css" /> 
     <!-- <link rel="stylesheet" type="text/css" href="fluid_responsive_masonry.css" /> --> 
    </head> 
    <body> 
     <h1>Masonry - animate item size with jQuery</h1> 
     <div class="masonry"> 
      <!-- <div class="grid-sizer"></div> --> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
      <div class="item"> 
       <div class="item-content"></div> 
      </div> 
     </div> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script src='http://masonry.desandro.com/masonry.pkgd.js'></script> 
     <script src="new_layout.js"></script> 
     <!-- <script src="layout.js"></script> --> 
    </body> 
</html> 

JS:

var timer = 0; 
var delay = 2000; 

var $container = $('.masonry').masonry({ 
    columnWidth: 60 
}); 

$(function() { 
    $container.on('mouseenter', '.item-content', function() { 
     timer = setTimeout(ToggleExpansion($(this)), delay); 
    }); 

    $container.on('mouseleave', '.item-content', function() { 
     clearTimeout(timer); 
    }); 

    $container.on('click', '.item-content', function() { 
     if ($(this).parent('.item').hasClass('is-expanded')) { 
      ToggleExpansion ($(this)); 
     } 
     else { 
      $container.children().removeClass('is-expanded'); 
      ToggleExpansion ($(this)); 
     } 
    }); 


}); 

function ToggleExpansion (thisObj) { 
    if (!$(this).parent('.item').hasClass('is-expanded')) { 
     $container.children().removeClass('is-expanded'); 
     thisObj.parent('.item').toggleClass('is-expanded'); 
    } 

    $container.masonry(); 
} 

CSS:

* { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

body { 
    font-family: sans-serif; 
} 

.masonry { 
    background: #EEE; 
    max-width: 640px; 
} 

.masonry .item { 
    float: left; 
} 

/* item is invisible, but used for layout */ 
.item, 
.item-content, 
.grid-sizer { 
    width: 60px; 
    height: 60px; 
} 

.item { 
    border: none; 
    background: transparent; 
} 

/* item-content is visible, and transitions size */ 
.item-content { 
    width: 60px; 
    height: 60px; 
    background: #D26; 
    border: 2px solid #333; 
    border-color: hsla(0, 0%, 0%, 0.5); 
    border-radius: 5px; 
    -webkit-transition: width 0.4s, height 0.4s; 
     -moz-transition: width 0.4s, height 0.4s; 
     -o-transition: width 0.4s, height 0.4s; 
      transition: width 0.4s, height 0.4s; 
} 

.item:hover .item-content { 
    border-color: white; 
    background: #A2C; 
    cursor: pointer; 
} 

/* both item and item content change size */ 
.item.is-expanded, 
.item.is-expanded .item-content{ 
    width: 180px; 
    height: 120px; 
} 

.item.is-expanded { 
    z-index: 2; 
} 

.item.is-expanded .item-content { 
    background: #F90; 
} 
+1

*「jQuery settimeout()不能正常工作」*'setTimeout'不是一個jQuery的東西。這是一個瀏覽器的東西。 – 2014-08-27 09:44:56

回答

0

您將n EED做兩件事情:

  1. 總結你的計時器代碼的功能。

  2. 手柄this,因爲在事件處理thisthis在定時器功能是不一樣的。

這既處理:

$container.on('mouseenter', '.item-content', function() { 
    var $this = $(this);    // Wrap element here, so we have a var 
              // to close over 
    timer = setTimeout(function() {  // Wrap your code in a function 
       ToggleExpansion($this); // Use the var the function closes over 
      }, delay); 
}); 

或使用ES5的Function#bind(這是shimmable在老引擎):

$container.on('mouseenter', '.item-content', function() { 
    timer = setTimeout(ToggleExpansion.bind(null, $(this)), delay); 
}); 

或者使用jQuery的$.proxy

$container.on('mouseenter', '.item-content', function() { 
    timer = setTimeout($.proxy(ToggleExpansion, null, $(this)), delay); 
}); 
+1

這個伎倆!謝謝。我會嘗試其他的解決方案,它看起來更乾淨=) – RafS 2014-08-27 09:51:31

0

試試這個

$container.on('mouseenter', '.item-content', function() { 

     var _this = this; 

     timer = setTimeout(function() { 

         ToggleExpansion($(_this)) 

       }, delay); 
}); 
+0

現在它已經等待了很長時間,但仍然沒有達到我的預期。擴展不會發生,也許是因爲$(this)不是我需要的div(「.item-content」)? – RafS 2014-08-27 09:47:11

0

只是這樣做:

$container.on('mouseenter', '.item-content', function() { 
    var itemcontent = $(this); 
    timer = setTimeout(function() { 
     ToggleExpansion(itemcontent); 
    }, delay); 
}); 
+0

的確,thanx的更正。儘管如此,在允許的3分鐘之間的答案 – 2014-08-27 09:52:49