jQuery - jQuery - запрос:Как мне вывести из строя список менее часто используемых divs и выполнить затухание при наведении курсора мыши?
-
23-09-2019 - |
Вопрос
Допустим, у вас есть куча элементов на веб-странице, которыми вы мало пользуетесь, как jQuery может немного их уменьшить, но только при отсутствии наведения курсора мыши?Он должен снова исчезнуть при наведении курсора мыши!
Решение
Я решил это следующим образом:
//list the items you want to fade out in normal selector format
var arr = [ "#navTop","#banner","#idViewToolbar","#fbsidebar","#idActionP","table.noBorder" ];
//delay function by Clint Helfers
$.fn.delay = function( time, name ) {
return this.queue( ( name || "fx" ), function() {
var self = this;
setTimeout(function() { $.dequeue(self); } , time );
} );
};
$.each( arr, function(i, l){
jQuery(l).fadeTo(600, 0.10);
jQuery(l).mouseenter(function(){
jQuery(this).fadeTo(600, 1);
});
jQuery(l).mouseleave(function(){
jQuery(this).delay(5000).fadeTo(600, 0.10);
});
});
На самом деле я использовал это для FogBugz - у них есть плагин, который позволяет вам вставлять на страницу ваши собственные CSS + Javascript, я использую его для удаления большинства материалов, кроме списка ошибок / функций, над которым я работаю.
Другие советы
если вам не нужны анимационные материалы, вы можете сделать это с помощью чистого css, используя :hover
селектор psoudo однако существует также .hover()
метод в jquery, он поможет вам добиться этого эффекта.что- то вроде этого: $('.my_less_used_divs').hover(fadeInFunction, fadeOutFunction);
Чтобы на самом деле поместить то, что рекомендовал antpaw, в код.Сделайте следующее.
$(".my_less_used_divs").hover(function() {
$(this).css("opacity", 1);
}, function() {
$(this).css("opacity", .5);
}).css("opacity", .5);
Вы должны дать antpaw принятый ответ, если вам это нравится.
$(".divfade").hover(function() {
$(this).fadeTo("slow", 1);
}, function() {
$(this).fadeTo("slow" , .5);
}).css("opacity", .5);
Этот код действительно появляется и исчезает.