平滑過渡顯示/隱藏懸停jQuery的功能？

我使用圖像映射，當圖像的某些部分是盤旋它表明股利。（想在這個網站http://jquery-image-map.ssdtutorials.com/）我想在div出現與平穩過渡...這裏是我的js代碼平滑過渡顯示/隱藏懸停jQuery的功能？

var mapObject = { 
    hover : function(area, event) { 
     var id = area.attr('name'); 
     if (event.type == 'mouseover') { 
      $('.' + id).show(); 
      $('#'+ id).siblings().each(function() { 
       if ($(this).is(':visible')) { 
        $(this).hide(); 
       } 
      }); 
      $('#'+ id).show(); 
     } else { 
      $('.' + id).hide(); 
      $('#'+ id).hide(); 
      $('#room-0').show(); 
     } 
    } 
}; 
$(function() { 

    $('area').live('mouseover mouseout', function(event) { 
     mapObject.hover($(this), event); 
    }); 

});

任何人都可以請建議我的變化平穩過渡... 在此先感謝！ :)

來源

2014-09-21 newbie

'live'是非常過時。你使用的是什麼版本的jQuery？ – yuvi 2014-09-21 18:11:39

@yuvi jquery-1.6.4.min.js – newbie 2014-09-21 18:13:45

給你的'show（）'和'hide（）'一個像'show（500）'這樣的過渡時間' – 2014-09-21 18:15:47

因此，首先，一個無關的提示 - 這將是一個好主意（稍微更新jQuery）（如果沒有任何東西取決於您使用的舊版本）。 live將不可用，相反，您需要用.on替換它，否則它是個好主意。其次，聲音就像你要找的所有聲音是hide和show一些過渡。您可以簡單地將它們替換爲fadeIn()和。您也可以使用toggle，它可以一次完成所有操作（雖然在使用懸停時可能會出現錯誤，因爲它會像瘋了一樣翻轉）。

這裏是一個小片段，顯示了他們是如何工作：

$(document).ready(function() { 
 
    
 

 
    var img = $('img'); 
 
    
 
    $('#show').on('click', function() { 
 
    \t img.fadeIn(); 
 
    }); 
 
    
 
    $('#hide').on('click', function() { 
 
    \t img.fadeOut(); 
 
    }); 
 
    
 
    $('#toggle').on('click', function() { 
 
    \t img.fadeToggle(); 
 
    }); 
 
    
 
    
 
});

* { font-family: sans-serif; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="show"> Show me! </button> 
 

 
<button id="hide"> Hide me! </button> 
 

 
<button id="toggle"> Toggle me! </button> 
 

 
<br> 
 
<br> 
 
<img src="http://www.randomwebsite.com/images/head.jpg" />

當然，這些都是使用.animate功能，這是對自己相當靈活的只是快捷功能。 Here's a link在這裏你可以閱讀更多關於jQuery中的效果和動畫，以及如何使用它們。

來源

2014-09-21 18:22:08 yuvi

當我將show（）更改爲.fadein（）並隱藏到fadeout（）。它根本沒有迴應。你可以修改我的代碼嗎？ – newbie 2014-09-21 18:29:51

@newbie打開鉻devtools，並看看控制檯。你在那裏看到任何錯誤？ – yuvi 2014-09-21 18:33:39

@newbie上面的鏈接仍在使用「show」和「hide」。如果您想要更改爲動畫，請添加'.animate'或使用快捷鍵「淡入淡出」功能之一。哪部分不適合你？ – yuvi 2014-09-21 18:58:22

回聲yuvi說，'活'功能已棄用。

我不知道爲什麼你有一個對象內部的懸停功能，但你也可以像這樣做，使用fadeTo：

var mapObject = { 
 
    hover : function(area, event) { 
 
     var id = area.attr('name'); 
 
     if (event.type == 'mouseover') { 
 
      $('#'+ id).fadeTo(1000, 1.0); 
 
     } else { 
 
      $('#'+ id).fadeTo(1000, 0); 
 
     } 
 
    } 
 
}; 
 

 
$(function() { 
 
    $('.area').bind('mouseover mouseout', function(event){ 
 
     mapObject.hover($(this), event); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="area" name="div1" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div> 
 
<div class="area" name="div2" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div> 
 
<div id="div1" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in One</div> 
 
<div id="div2" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in Two</div>

來源

2014-09-21 19:23:40 HeadCode

平滑過渡顯示/隱藏懸停jQuery的功能？

回答

相關問題