CODEWITHSUNDEEP
jquerycssnavigation
Mehran
Mehran

Reputation: 323

Scrolling between two specific pixel point

This is my code:

$(document).ready(function(){
    $(".right").click(function () {
            $("p").animate({right: "-=64px"});
    });
$(".left").click(function(){
        $("p").animate({right: "+=64"});
    });

How i can make two specific pixels point, that my icons just moving between those.

This is my Fiddle

I want my icons navigate in table and anytime they arrive to the end of gray color, stop and dont move anymore. just can move inverse on the other button.

is it possible with .css("right") ? If yes, please guide me how.

Thanks.

Upvotes: 5

Views: 115

Answers (3)

hityagi
hityagi

Reputation: 5256

Here's the fiddle : http://jsfiddle.net/VQwtp/3/

js

var movementFactor = 30;

var minWidth = $('#animSubject').width();
var maxWidth = $('#animArea').width();

$("#right").click(function () {
    var subWidth = $('#animSubject').width();
    if (maxWidth > (subWidth + movementFactor)) {
        $("#animSubject").animate({
            width: "+=" + movementFactor + "px"
        });
    } else if (maxWidth > subWidth) {
        $("#animSubject").animate({
            width:(maxWidth) + "px"
        });
    }

});
$("#left").click(function () {
    var subWidth = $('#animSubject').width();
    if (minWidth < (subWidth - movementFactor)) {
        $("#animSubject").animate({
            width: "-=" + movementFactor + "px"
        });
    } else if (minWidth < subWidth) {
        $("#animSubject").animate({
            width:(minWidth) + "px"
        });
    }
});

You can vary movementFactor to move images with required distance with one click.

Upvotes: 1

JiFus
JiFus

Reputation: 968

I made a new fiddle for you,

The point is if you want something to move between 2 points, you shouldn't use "-=64px" or "+=64px".

Just use a static point.

Fiddle

So that means you should use something like:

$(document).ready(function(){
$(".right").click(function () {
        $("p").animate({right: "0"});
});
$(".left").click(function(){
    $("p").animate({right: "320px"});
});

Upvotes: 1

Priya
Priya

Reputation: 1554

I have created a plnkr here, you can check

Upvotes: 1

Related Questions