將jQuery分配給一個div？

我正在使用jQuery腳本在網頁上以50％的不透明度製作所有圖像。當鼠標懸停/滾動特定圖像時，該圖像的不透明度會回到100％。將jQuery分配給一個div？

開始腳本

$(document).ready(function(){ 
    $('a img').animate({ 
     opacity:.5 
    }); 
    $('a img').hover(function(){ 
     $(this).stop().animate({opacity:1}); 
    }, function(){ 
     $(this).stop().animate({opacity:.5}); 
    }); 
});

SCRIPT

的結束時，我只希望我的投資組合/畫廊圖像的網頁上使用此代碼。

如何將此代碼分配給網頁上的特定圖像集，以便其他帶鏈接的圖像不受影響？示例：我不希望我的徽標和其他帶有鏈接的圖像受到網頁HEAD部分中的jQuery代碼的影響。

現在，我可以從圖像中刪除鏈接以獲取我期待的結果。這不是我想如何設置頁面，而只是一個臨時修復。

謝謝你的幫助！

來源

2013-07-30 user2510920

這看起來像一個完美使用CSS – Richard

就像你在CSS中，您可以選擇使用jQuery中。例如，如果您的畫廊是

<div class="gallery"><a><img><a><img>...

你可以簡單地通過添加到您當前選擇的目標庫中的所有圖像：

$('.gallery a img')...

或者，以適應你的代碼（不知道是什麼包裝您的畫廊）：

$(document).ready(function(){ 
    $('.gallery a img').animate({ 
    opacity:.5 
    }); 
    $('.gallery a img').hover(function(){ 
     $(this).stop().animate({opacity:1}); 
    }, function(){ 
     $(this).stop().animate({opacity:.5}); 
    }); 
});

來源

2013-07-30 19:10:37

謝謝你所有的迴應！這對我來說很有用。 – user2510920

您可以向您想要影響的圖像添加一個虛擬類，然後將該類包含在jQuery選擇器中。所以，如果你給class='hover-fade'到您的圖片，那麼你可以使用：

$(document).ready(function(){ 
    $('a img.hover-fade').animate({ 
     opacity:.5 
    }); 
    $('a img.hover-fade').hover(function(){ 
     $(this).stop().animate({opacity:1}); 
    }, function(){ 
     $(this).stop().animate({opacity:.5}); 
    }); 
});

所以，既然您的標誌，沒有分配給它的那類，它不會被腳本實現的。

來源

2013-07-30 19:09:21 theftprevention

你可以把一個特異性類放在你的圖像上會有這種行爲。

$(document).ready(function(){ 
    $('a img.classtoopacity').animate({ 
     opacity:.5 
    }); 
    $('a img.classtoopacity').hover(function(){ 
     $(this).stop().animate({opacity:1}); 
    }, function(){ 
     $(this).stop().animate({opacity:.5}); 
    }); 
});

來源

2013-07-30 19:10:17 Guerra

我們一起回答。 – Guerra

比方說，您的畫廊有id像id="gallery"

純CSS3：LIVE DEMO

#gallery a img{ 
    opacity: 0.5; 

    -webkit-transition: opacity 0.4s; 
     -ms-transition: opacity 0.4s; 
     -o-transition: opacity 0.4s; 
      transition: opacity 0.4s; 
} 
#gallery a img:hover{ 
    opacity: 1; 
}

示例使用jQuery：LIVE DEMO jQuery

$(function(){ 

    $('#gallery a img').animate({opacity:0.5}).hover(function(e){ 
     $(this).stop().animate({opacity: e.type=="mouseenter" ? 1 : 0.5 }); 
    }); 

});

，你也可以使用fadeTo([time],[opacity])方法，如：

$('#gallery a img').fadeTo(400,0.5).hover(function(e){ 
    $(this).stop().fadeTo(400,e.type=="mouseenter" ? 1 : 0.5); 
});

來源

2013-07-30 19:13:17

將jQuery分配給一個div？

回答

相關問題