Using Jquery to slide in an Icon

Question

this will be my first question asked as i generally can find the answers on here....but this question is different since i dont think i'm...using the correct term to describe something.

here is the website i will be using as an example. http://html5up.net/big-picture

when you scroll down to the second background image stating "What I Do" a context box slides out from the right side of the page. i tried everything i could to make this work on my website and i couldn't get it to work whatsoever...not in the least bit.

what i want to do: either when i scroll down, or(even better) when i hover over a specific area of my website ( preferably) i want two icons to slide into that row. i know it's possible i just have no idea how to do it...i don't know much about jquery or javascript in general. thanks, again, if anyone can help me figure out how to get these guys to slide into view!!

score 1 · Accepted Answer · answered Feb 24 '14 at 22:54

1

you can do it with .animate

$(function () {
    $("#show").on("mouseover", function () {
        $("#info").animate({
            right: "+=400"
        }, 1000, function () {
            // Animation complete.
        });
    });
    $("#show").on("mouseout", function () {
        $("#info").animate({
            right: "-350px"
        }, 1000, function () {
            // Animation complete.
        });
    });
});

DEMO: http://jsfiddle.net/vHPM7/

answered Feb 24 '14 at 22:54

Sam Battat

5,647
1
18
28

thanks for this! it worked perfectly! one question...could you tell me how to put a .stop on it??? i've only just started working with javascript and i can't figure out how to do a .stop(true, true) event so taht it doesnt keep moving around if you hover over it multiple times. – mephisto21 Feb 26 '14 at 19:38
something like this http://jsfiddle.net/vHPM7/22/? Also, please mark this as an answer – Sam Battat Feb 26 '14 at 21:38

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

In general, this site is using the Parallax effect.More info

The effect on image might discovered here: Load images when the user scrolls down the page -

edited May 23 '17 at 12:28

Community

1
1

answered Feb 24 '14 at 22:49

Elfentech

747
5
10

Using Jquery to slide in an Icon

2 Answers2