изображение парения jQuery исчезает подкачка
@Hank Gay
В ответ на комментарий EmbiggensTheMind:
я не могу думать об экземпляре, где приправляющий карри — itself— полезен в JavaScript; это - техника для преобразования вызовов функции с несколькими аргументами в цепочки вызовов функции с отдельным аргументом для каждого вызова, но поддержки JavaScript несколько аргументов в единственном вызове функции.
В JavaScript— и я принимаю большинство других фактических языков (не лямбда-исчисление) —, это обычно связывается с частичным приложением, все же. John Resig объясняет его лучше , но суть, это имеет некоторую логику, которая будет применена к двум или больше аргументам, и Вы только знаете значение (значения) для некоторых из тех аргументов.
можно использовать частичное приложение/приправлять карри, чтобы зафиксировать те значения известных и возвратить функцию, которая только принимает неизвестные, чтобы быть вызванной позже, когда у Вас на самом деле есть значения, Вы хотите передать. Это обеспечивает изящный способ постараться не повторять себя при вызове того же JavaScript созданным-ins много раз со всем одинаковым значения, но один. Украсть пример John:
String.prototype.csv = String.prototype.split.partial(/,\s*/);
var results = "John, Resig, Boston".csv();
alert( (results[1] == "Resig") + " The text values were split properly" );
4 ответа
Вы также можете сделать это с помощью одного фонового изображения и постепенного появления и исчезновения прозрачного div. Вот быстрый пример, который можно расширить для автоматической работы с одним классом изображений:
$(document).ready( function() {
$("#mask-div")
.css({
"position": "absolute",
"width": 275,
"height": 110,
"background": "rgba(255, 255, 255, 0.5)"
})
.mouseover( function() {
$(this).fadeOut("slow");
})
;
$("#test-img").mouseout( function() {
$("#mask-div").fadeIn("slow");
});
});
Работающую демонстрацию можно увидеть на jsbin: demo-one
ОБНОВЛЕНИЕ: Вот более общее решение (неполное, но показывает некоторые идеи): demo-two . Просто добавьте класс «fade-img» к любому изображению, которое вы хотите создать для этого эффекта.
$(document).ready( function() {
$(".fade-img")
.before("<div class='fade-div'></div>")
.each( function() {
var img = $(this);
var prev = img.prev();
var pos = img.offset();
prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left })
.mouseover( function() {
$(this).fadeOut("slow");
}
);
})
.mouseout( function() {
$(this).prev().fadeIn("slow");
})
;
});
Я выбираю решение, указанное во второй ссылке, которую вы предоставили. Он короткий, чистый и простой.
- Создайте два тега
- Расположите один точно над другим (CSS с
z-index) - При наведении уменьшить непрозрачность изображения с более высоким
z-indexдо0 - . Это сделает его прозрачным, и вы увидите нижележащее изображение
- . ] снова.
Готово
внутри $ (document) .ready ()
$('.imgbuttonclass').hover(function(){
$(this).animate({
backgroundImage: 'img2.png'
},500);
},function(){
$(this).stop(true).animate({
backgroundImage: 'img1.png'
},500);
});
edit
, если вы хотите только это: http://designwoop.com/2009/ 08 / image-hover-effect-using-jquery-tutorial /
, затем используйте ответ jthompson или просто используйте код с этой страницы. если вы хотите использовать два отдельных изображения, вы можете взглянуть на это:
http://peps.ca/blog/easy-image-rollover-script-with-jquery/
и demo
то, что он делает, это
Он просматривает документ на предмет любых Теги img или input с классом «Ро». Изображение ролловера должно быть назван так же, как и обычное изображение, но с «_o» в конце. Например, наведенное изображение для «image.gif» будет «Image_o.gif». Найдя все теги изображений, скрипт предварительно загружает все изображения ролловера и реклама События «mouseover» и «mouseout».
Переход между плавным переходом изображения с помощью jQuery объясняет некоторые способы решения этой проблемы ..