沒有jQuery的onmouseover轉換效果

我在我的開發站點http://www.new.ianroyal.co上使用onmouseover作爲主站點徽標的懸停效果。沒有jQuery的onmouseover轉換效果

onmouseover瞬間更改網站徽標圖像，我想知道是否可以在不使用jQuery的情況下應用過渡效果（淡入，或只是通常減慢過渡速度）。

這裏是我的代碼

<a href="<?php echo esc_url(home_url('/')); ?>" ONMOUSEOVER='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo.png" ' ONMOUSEOUT='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png" '><img src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png" NAME="ian" class="header-image" alt="Ian Nelson"/></a>

我找啊找，但它似乎是唯一solultions與jQuery的我沒有足夠的把握尚未。

謝謝

來源

2012-10-23 Michael McVerry

使用css3轉換。

div { 
    height: 100px; 
    width: 100px; 
    background: url(image1.png) no-repeat; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
} 

div:hover { 
    background-image: url(image2.png) 
}

舊的瀏覽器將不會爲過渡設置動畫。

演示：http://jsfiddle.net/elclanrs/jg7G3/

來源

2012-10-23 21:35:41 elclanrs

好小貓！ :-) – Holf

感謝您的回覆 - 當我有一些時間來實現時，我會隨它一起實現，因爲這是一個非我所問的非jQuery答案。 @Andyl - 我將在掌握jQuery之前先通過Codecademy掌握Javascript，但我已經瞭解它的強大功能。 –

什麼是aboaut IE？ – Reflective

瞭解jQuery。我保證它會讓你在長時間（短時間）內快樂。這就是說，一旦你知道jQuery，回到香草js，讓你真正理解它是如何工作的。

舉例來說，在jQuery的你的問題會簡單：

$(function() { 
    $('a').fadeOut(); 
    $('a').attr('src', '{new image path}'); 
    $('a').fadeIn(); 
});

來源

2012-10-23 21:31:43 AndyL

實際上'$（ '一IMG'）。attr（'src'，'{新圖像路徑}'）;' – Reflective

好通話，我的錯。 – AndyL

無論如何，這不會像你期望的那樣工作，因爲'fadeIn'和'fadeOut'是異步方法。當fadeOut完成時，fadeIn應該啓動...'fadeIn（'slow'，function（）{...更改src並啓動fadeOut ...}）... ...看下面的工作示例 – Reflective

理想的情況下，只需要使用CSS過渡和:hover選擇，並留下JS出它完全，comme ça。

來源

2012-10-23 21:35:00 XML

您可以使用純粹的CSS3。

.fade { 
opacity: 1; 
transition: opacity .25s ease-in-out; 
-moz-transition: opacity .25s ease-in-out; 
-webkit-transition: opacity .25s ease-in-out; 
} 

.fade:hover { 
    opacity: 0.5; 
    }

取自here的示例。還有很多其他的可能性，但這應該是一個好的開始。

但是，它只適用於支持CSS3轉換的瀏覽器。特別是Internet Explorer是late to the game，並且還有lots of people out there using it（以及其他瀏覽器的舊版本不支持CSS3）。

如果你想要一個真正的跨瀏覽器的解決方案，最大限度地支持舊版本，那麼JQuery真的是要走的路。然而，看起來很難，花在學習淡化方面的時間真的會得到回報。學習如何做一些JQuery幾乎肯定會容易得多，而不是做一個等效的純JavaScript解決方案，它可以提供與JQuery免費提供的相同的跨瀏覽器兼容性。

來源

2012-10-23 21:35:02 Holf

我不像IE一樣，但許多企業客戶都使用它。有趣但不適用於生產代碼。 – Reflective

工作示例，只是提供image1.jpg和image2.jpg在同一個目錄下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script> 
<script> 
$(function() { 

$('img').mouseenter(function(){ 
    $(this).fadeOut('fast', function(){ 
    $(this).attr('src', $(this).data('on')); 
    $(this).fadeIn(); 
    }); 
}); 

$('img').mouseleave(function(){ 
    $(this).fadeOut('fast', function(){ 
    $(this).attr('src', $(this).data('off')); 
    $(this).fadeIn(); 
    }); 
}); 


}); 

</script> 

<img width="100" height="100" src="image1.jpg" data-on="image2.jpg" data-off="image1.jpg">

來源

2012-10-23 21:53:36 Reflective

回答

相關問題