jquery Hover - Fade Image to Another

Было много вопросов по этой теме, но я никогда не решился на солидный ответ. Я также пробовал разные способы и никогда не нашел действительно лучшего решения.jquery Hover - Fade Image to Another

В моей ситуации у меня есть куча флагов, которые нужно разместить в заголовке моей страницы. Каждый флаг является PNG, и я также выдал черно-белые версии из них. Я хочу добавить простой CSS-класс (либо DIV, либо IMG, либо что-то!), И иметь небольшой фрагмент jquery, который будет исчезать до цветного изображения, когда я нависнет над ним и исчезнет, когда я не буду парить над ним Это.

Я не хочу делать это с помощью CSS, потому что это скучно. JQuery - это тот путь, который я чувствую, и он будет выглядеть намного шикарнее.

Пожалуйста, помогите, я хочу, чтобы самый маленький наиболее эффективный код был возможен, без слоев на слоях CSS или огромного файла .JS include.

Спасибо,

Ричард

источник

2012-06-11 Chud37

Какой код вы уже пробовали? – lucuma

$ (документ) .ready (функция() { \t \t вар х = 0;.. \t \t $ ("# usa_d") зависать (функция() { \t \t \t $ ("# usa_d") FadeOut (400); \t \t \t х = 1;. \t \t \t \t \t \t // $ ("# usa_d") FadeOut (400, функция() {$ (это) .attr ('SRC', $ ('#usa_n'). attr ('src')). fadeIn();}); \t \t \t $ ('# t').HTML ('ON'); \t \t \t \t \t /// alert ('hover'); \t \t}); . \t \t $ ("# usa_d") MouseOut (функция() { \t \t \t \t $ (это) .fadeIn (900). \t \t \t \t $ ('# т') HTML ('выключено'); \t \t \t // предупреждение ('focusout.'); \t \t \t // $ ("# usa_n") Затухание (400, функция() {$ (это) .attr ('ЦСИ', $ ('#usa_d'). attr ('src')). fadeIn();}); \t \t}); \t}); Но это не работает. Извините за ужасное форматирование. Я довольно новичок в stackOverflow. – Chud37

Однако, похоже, что все работает отлично, за исключением того, что я не могу видеть, что он работает хорошо с несколькими изображениями, и кажется, что он снова исчезает, когда я останавливаюсь зависания. И я не могу понять, почему. В HTML была попытка отладить это. – Chud37

что-то вроде этого, может быть:

<div class="flag" style="background-image:url(bw.png)"><img src="incolor.png" style="display:none;"></div> 

<script> 
$(document).ready(function() { 
    $('.flag').hover(function() { 
     $(this).find('img').stop().fadeIn('fast'); 
    }, function() { 
     $(this).find('img').stop().fadeOut('fast'); 
    }); 
}); 
</script>

источник

2012-06-11 13:16:39 demux

Я отдам его сейчас! – Chud37

На самом деле это работает очень хорошо. Мне нужно немного поработать над этим, но это именно то, что я искал - большое спасибо! – Chud37

'show()' и 'hide()' также будут анимировать измерения, которые, я думаю, вам не нужны. –

HTML:

<div class"flag-area england"><div> 
<div class"flag-area germany"><div>

CSS:

/* Example default values */ 
.flag-area 
{ 
    background-position: 5px 10px; 
    background-repeat: no-repeat; 
} 

/* Flag specfic values */ 
.flag-area.england 
{ 
    background-image:url('images/england.png') 
} 

/* Flag specfic values */ 
.colored-flag.england 
{ 
    background-image:url('images/england_colored.png') 
} 

.colored-flag.germany 
{ 
    background-image:url('images/germany_colored.png') 
}

Javasript:

$('.flag-area').hover(function() { 
    $(this).toggleClass('colored-flag', 500); 
}, function() { 
    $(this).toggleClass('colored-flag', 1000); 
});

Но если вы можете решить эту проблему с помощью CSS и использовать правила, как, я рекомендую сделать избегать JavaScript:

/* Flag specfic values */ 
.flag-area.england:hover 
{ 
    background-image:url('images/england_colored.png') 
}

И еще один намек: если у вас есть много флагов для отображения, используйте dont't много изображений, но только один, содержащий все флаги и вместо изменения фонового изображения, используйте для всех флагов одно и то же фоновое изображение и измените его положение.

источник

2012-06-11 13:14:39 iappwebdev

Не будет ли это действовать точно так же, как CSS Hover? Нет ли угасания, суровый? – Chud37

Ой, забыл об этом. Я обновил свой ответ. – iappwebdev

lol no problem matey. – Chud37

Посмотрите на это: http://jsbin.com/efovuz/2/edit

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<style> 
    .flag { width:350px; height:150px; position:relative; } 
    .flag img { position:absolute; left:0; top:0; display:block; } 
</style> 
</head> 
<body> 
<div class="flag"> 
    <img src="http://placehold.it/350x150/ff0" /> 
    <img class="bw" src="http://placehold.it/350x150/" /> 
</div> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script> 
    $(function() { 
     $('.flag').hover(
      function() { 
       $(this).children('.bw').first().fadeOut('slow'); 
      }, 
      function() { 
       $(this).children('.bw').first().fadeIn('slow'); 
      } 
     ); 
    }); 
</script> 
</body> 
</html>

источник

2012-06-11 13:21:44

Его приятно и работает, но я хочу держаться подальше от абсолютного позиционирования. – Chud37

Почему? позиционирование - это солидный способ проложить вещи и контролировать вещи, если вы понимаете это и используете его в качестве своего предназначения. –

Решение Arnar Yngvason может выставляться проблему, если вы быстро переместить мышь в и из изображение несколько раз. Это может привести к остановке анимации. Этот недостаток можно обойти, используя метод fadeTo вместо методов fadeIn/fadeOut:

<div class="flag" style="background-image:url(bw.png)"><img src="incolor.png" style="display:none;"></div> 

<script> 
$(document).ready(function() { 
    $('.flag').hover(function() { 
     $(this).find('img').stop().fadeTo(400, 1); 
    }, function() { 
     $(this).find('img').stop().fadeTo(400, 0); 
    }); 
}); 
</script>

источник

2013-06-28 20:16:53 Jpsy

jquery Hover - Fade Image to Another

ответ

Смежные вопросы