。懸停函數中的.unbind（）和.bind（）函數

我打算做一個懸停函數，它在懸停時取消綁定以前的綁定函數。。懸停函數中的.unbind（）和.bind（）函數

但我不認爲我明白jquery網站試圖解釋什麼。

請看我在這jsfiddle的嘗試。 http://jsfiddle.net/motocomdigital/S9uVh/

這是一個運行良好我的綁定功能...

$("h1.trunc").bind().shorten({ 
    width: 300, 
    tail: '...', 
    tooltip: false 
});

但後來我想.unbind（）它時，我的元素徘徊，但重新綁定它在我的第二懸停替代...

$('#element').hover(
    function() { 

     $(this).find("h1.trunc").unbind(); 

     $(this).animate({ 
      height : '100px'  
     }, 200);  

    }, 
    function() { 

     $(this).find("h1.trunc").bind().shorten({ 
      width: 300, 
      tail: '...', 
      tooltip: false 
     }); 

     $(this).animate({ 
      height : '20px'  
     }, 200); 

    } 
);

有人可以幫我解決這個問題。還有一種方法不必在我的懸停功能中再次重寫整個「h1.trunc」函數。

請參閱working jsfiddle here。提前致謝。

http://jsfiddle.net/motocomdigital/S9uVh/

來源

2012-07-09 Joshc

css'溢出的小錯誤：可見;'溢出：可見;' – coolguy 2012-07-09 14:54:14

如果你看shorten實際上在做什麼，它是rem在文本中出現並且這種方法沒有反轉，例如unshorten。

如果我理解正確，您希望在懸停時顯示文本，然後在hoveroff上再次截斷它。

我將擺脫shorten插件，並只使用CSS。看看這個小提琴：http://jsfiddle.net/S9uVh/22/

基本上我只是刪除一個類，然後再次添加它。 <h1>標籤被短接;

text-overflow: ellipsis; 
overflow: hidden;  
white-space: nowrap;

來源

2012-07-09 15:01:55

由於某種原因，我認爲文本溢出CSS只限於瀏覽器支持？但只是檢查了這一點，是的，它似乎在所有的瀏覽器工作。謝謝！ – Joshc 2012-07-09 15:11:25

是的，它是這樣的風格之一，你會認爲不會在IE6/7中工作，但實際上呢！ – 2012-07-09 15:25:18

非常好的解決方案。 – 2012-07-09 15:30:21

嗯，你似乎誤解了一些事情。首先.bind()一個人留下（即沒有參數）什麼都不做。其次，這個插件似乎改變了內部HTML，沒有binding。它不允許返回到之前的狀態。所以，我建議你應該這樣做：

HTML

<h1 class="trunc" data-text="This is a truncated title to untruncate when hovered using unbind tricks"></h1>

注意，我把所有的文字在data-text屬性。現在你的處理程序中你這樣做：

的JavaScript

var text = $("h1.trunc").attr("data-text"); 

$('#element').hover(
    function() { 

     $(this).find("h1.trunc").text(text); 

     $(this).animate({ 
      height : '100px'  
     }, 200);  

    }, 
    function() { 

     $(this).find("h1.trunc").text(text).shorten({ 
      width: 300, 
      tail: '...', 
      tooltip: false 
     }); 

     $(this).animate({ 
      height : '20px'  
     }, 200); 
    } 
);

結帳this jsFiddle。但請注意，這個.shorten插件似乎設置了nowrap css，這看起來很糟糕。您可能會改變所有必要的樣式，但編寫您自己的.shorten函數可能會更容易。：]

來源

2012-07-09 15:00:40 freakish

這是非常聰明的想法。感謝您的時間和幫助。 – Joshc 2012-07-09 15:20:08

你正在做某事/錯了。

用法

.bind(eventType [, eventData], handler(eventObject))

和

.unbind([eventType] [, handler(eventObject)])

而且* bind（）的已被廢棄，你已經應該使用上（）和關閉（）

來源

2012-07-09 15:00:49 worenga

感謝您的折舊。我認爲綁定是相當新的。 – Joshc 2012-07-09 15:12:11

工作演示： http://jsfiddle.net/S9uVh/30/

我已經存儲了每個標題原文，並存儲每個標題縮短文本。在#element盤旋時，最近的h1文本被替換爲原始文本。將鼠標懸停在其文本上會重新設置爲縮短版本。

來源

2012-07-09 15:10:39

好主意謝謝。只是一個小小的CSS tweeking。 – Joshc 2012-07-09 15:20:54

。懸停函數中的.unbind（）和.bind（）函數

回答

相關問題