在wordpress插件中的jQuery圖像幻燈片

我試圖使用jQuery插件上的jQuery動畫製作圖像。在wordpress插件中的jQuery圖像幻燈片

這是我在自定義代碼的JavaScript

$(function(){ 
    $('.esg-entry-cover').on('mouseover',function(){ 
    $('.esg-entry-media').find('img').animate({marginTop:($(this).find('img').height()-$(this).height())},1500) 
    }); 
    $('.esg-entry-cover').on('mouseleave',function(){ 
    $('.esg-entry-media').find('img').animate({marginTop: ''},1500); 
    }); 
});

我想要像在年底this 安迪滑梯的單獨的幻燈片效果的圖像只是高度感謝您的幫助。

來源

2016-04-03 user3649246

定義「不工作」。你會得到什麼錯誤？ – j08691

我的意思是，也許我的代碼是錯誤的。我不知道如何製作它。 – user3649246

我引用這個https://jsfiddle.net/pqrnt921/4/ 所以我認爲它可以工作。 – user3649246

網站輸出在JavaScript控制檯以下錯誤：Uncaught TypeError: $ is not a function

這意味着$沒有jQuery的定義，你要在這裏明確地使用jQuery。因此，當您將$替換爲jQuery時應該解決。

編輯

要動畫只有你懸停的形象，你在mouseenter/mouseleave使用this。這允許僅對當前元素進行更改。

jQuery(function(){ 
    jQuery('.esg-entry-media').on('mouseenter',function(){ 
     jQuery(this).children('img').animate({marginTop:($(this).find('img').height()-$(this).height())},1500) 
    }); 

    jQuery('.esg-entry-media').on('mouseleave',function(){ 
     jQuery(this).children('img').animate({marginTop: ''},1500); 
    }); 
});

來源

2016-04-03 18:50:34 wigi

好吧，沒有錯誤，但這不是我想要的。感謝幫助！ – user3649246

你說你的代碼不工作，我告訴過你爲什麼。我會更新我的帖子，使圖像逐個滑動，而不是全部一起滑動。 – wigi

是的！謝謝。 – user3649246

在wordpress插件中的jQuery圖像幻燈片

回答

相關問題