jQuery: исчезает изображение при наведении на него

Question

Таким образом, у меня есть цикл изображений, который, если не перепутать с циклическим переходом, каждое последующее изображение красиво исчезает.

Если навести курсор на изображение, оно загружается (не исчезает), а затем остальные циклы изображения снова циклически повторяются и постепенно появляются.

То, что я хочу сделать, это когда я наведу курсор на ссылку, и появится соответствующее изображение, я хочу, чтобы это изображение тоже исчезло, и я не могу понять, как сделать что-то вроде

перед загрузкой этого конкретного изображения, установите его непрозрачность на 0,6, затем медленно увеличивайте до 1,0.

Так возможно ли, по сути, когда пользователь наводит курсор на ссылку, в этот момент установить прозрачность и затемнить ее?

Еще раз спасибо, ребята, я, кстати, новичок в jQuery, поэтому любые комментарии / помощь приветствуются.

так вот разметка:

<div id="s1" style="z-index:100">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
</div>

<ul id="nav">
  <li id="nav1"><a href="#" onmouseover="changeSlide(0)" 
                      onmouseout="continueSlide(0)">Text1</a></li>
  <li id="nav2"><a href="#" onmouseover="changeSlide(1)" 
                      onmouseout="continueSlide(1)">Text2</a></li>
</ul>


function changeSlide(slide) {
    $('#s1').cycle({
        fx: 'fade',
        startingSlide: slide,
        speed: 1500,
        timeout: 0
    });
    $('#props').cycle({
        startingSlide: slide,
        fx: 'fade',
        speed: 1500,
        timeout: 0
    });
}

function continueSlide(slide) {
    $('#s1').cycle({
        startingSlide: slide,
        fx: 'fade',
        speed: 1500,
        timeout: 5000
    });
    $('#props').cycle({
        startingSlide: slide,
        fx: 'fade',
        speed: 1500,
        timeout: 5000

    });
}
$(function() {

    $('#s1').cycle({
        fx: 'fade',
        speed: 1500,
        timeout: 5000
    });
    $('#props').cycle({
        fx: 'fade',
        speed: 1500,
        timeout: 5000

    }); 
});

</script>

Я пытался выяснить, могу ли я положить onBefore или что-то в этом духе и вызвать функцию затухания, но не могу понять это.

Answer 1

Функция fadeTo позволяет вам постепенно увеличивать / уменьшать элементы, контролирующие прозрачность.

Вы можете вызвать изменение непрозрачности с помощью функции hover :

$('#s1 img').hover(
  function(){
    $(this).fadeTo('slow', 1);
  },
  function(){
    $(this).fadeTo('slow', 0.6);
});

Проверьте этот пример.