восстановить настройки по умолчанию с помощью jQuery hover

Question

восстановить настройки по умолчанию с помощью jQuery hover

0

У меня есть код ниже:

Jquery

$(document).ready(function() {
    $("#developer").hover(function() {
        $("#coder").fadeTo(1000,0.4);
        $("#my_pic").animate({right:'110px'}, 1500);
    });
});

Он работает, но я хочу восстановить значения по умолчанию, когда пользователь перемещает мышь из области #developer.

CSS

#coder {
    opacity: 1;
}

#my_pic {
    position: relative;
}

HTML

<div id="developer" class="threecol">
    <h1><span>&lt;</span>developer<span>&gt;</span></h1>
</div>

<div class="sixcol">
    <img id="my_pic" src="images/me.png" />
</div>

<div id="coder" class="threecol last">
    <h1><span>&lt;</span>coder<span>&gt;</span></h1>
</div>

Jawad Asghar Ali 24 апр. 2014, в 12:01

Источник

0

@ Феликс: разметка слишком длинная. Просто когда я наводю курсор мыши на #developer, #coder исчезает до 0,4, а #my_pic анимируется вправо: 110px. Так и остается, даже когда я выхожу из #developer.
Jawad Asghar Ali 24 апр. 2014, в 09:47
0

@Felix: я не эксперт по jQuery, но я считаю, что jQuery hover имеет on_mouse_in и on_mouse_out. Так или иначе, я должен написать функцию для части on_mouse_out.
Jawad Asghar Ali 24 апр. 2014, в 09:49
0

@Felix: добавлена разметка
Jawad Asghar Ali 24 апр. 2014, в 09:55

Показать ещё 1 комментарий

Теги:

jquery

html5

css3

hover

4 ответа

0

$(document).ready(function() {
$("#developer").mouseout(function() {
    $("#coder").fadeTo(1000,1);
    $("#my_pic").animate({right:'110px'}, 1500);
});
});

vivek shaushi 24 апр. 2014, в 07:59

1

для этого потребуется установить 2 функции ... hover ухаживает оба, mouseover и mouseout ... http://api.jquery.com/hover/
webeno 24 апр. 2014, в 09:59

0

Попробуй это

$(document).ready(function() {   
    $("#developer").hover(function() {
        $("#coder").fadeTo(1000,0.4);
        $("#my_pic").animate({right:'110px'}, 1500);
    }, 
    function() {
        $("#coder").fadeTo(1000,1);
        $("#my_pic").animate({right:'0'}, 1500)
    });
});

DEMO

Runny 24 апр. 2014, в 07:49

0

Просто добавьте другую функцию, заботясь о сбросе после первой функции внутри hover:

$(document).ready(function() {
    $("#developer").hover(
        function() {
            $("#coder").fadeTo(1000,0.4);
            $("#my_pic").animate({right:'110px'}, 1500);
        }, function() {
            $("#coder").fadeTo(1000,1);
            $("#my_pic").animate({right:'0'}, 1500);
        });
});

webeno 24 апр. 2014, в 07:03

0

здорово. работает нормально
Jawad Asghar Ali 24 апр. 2014, в 09:57

Ещё вопросы

@ Феликс: разметка слишком длинная. Просто когда я наводю курсор мыши на #developer, #coder исчезает до 0,4, а #my_pic анимируется вправо: 110px. Так и остается, даже когда я выхожу из #developer.
@Felix: я не эксперт по jQuery, но я считаю, что jQuery hover имеет on_mouse_in и on_mouse_out. Так или иначе, я должен написать функцию для части on_mouse_out.
для этого потребуется установить 2 функции ... hover ухаживает оба, mouseover и mouseout ... http://api.jquery.com/hover/

Ryan.Hunt · Accepted Answer · 2014-04-24T07-13-00.000Z

Просто используйте вторую function для hover

, function(){
    $("#coder").fadeTo(1000,1);
    $("#my_pic").animate({right:'0px'}, 500);            
}

FIDDLE