CODEWITHSUNDEEP
jqueryhtmlcss
K.Z
K.Z

Reputation: 5075

jquery div animation on mouse click

I am stuck with second of my simple animation in jquery and css. what i am try to achieve when user click on "search_TextBox" selector, the div with searchFormWrapper_01 selector goes to position from (left) -280px to 0 with animation on horizontal scale, which is working perfectly however searchFormWrapper_01 does go back to -280 when user click second time...

seems my else if condition not responding ... i am sure it will something small silly mistake but i need help... many thanks

jquery:

<script type="text/javascript">

    $(document).ready(function () {

        $("#search_TextBox").click(function () {


            if ($(".searchFormWrapper_01").css("left") != 0) {
                $(".searchFormWrapper_01").animate({ left: 0 }, 'fast');
            }

            else if ($(".searchFormWrapper_01").css("left") == 0){
                $(".searchFormWrapper_01").animate({ left: -280 }, 'fast');
            }
        });
    });

    </script>

html

 <div class="container">   
    <div class="searchFormWrapper_01">
        <div class="search_form"> my content </div>
        <span id="search_TextBox">my image</span>
    </div>
  </div>

css

container {
    background-color:red;
    width:66em;
    height:375px;
    margin: 0 auto;
    position:relative;
    overflow:hidden;
}

.searchFormWrapper_01 {
    width:330px;
    height:375px;
    position:absolute;
    background-color:green;
    left:-280px;
}

.search_form {
    float:left;
    width:270px;
    height:375px;
    background-color:pink;
    margin-left:10px;
}

 #search_TextBox{ 
     float:left;
     width:50px;
     height:375px; 
     background:url("../Content/themes/base/images/searchText.png") no-repeat;
 }

Demo: Fiddle

Upvotes: 1

Views: 1283

Answers (8)

K.Z
K.Z

Reputation: 5075

i use this way and it works ... many thank to everyone for response 

  $(document).ready(function () {

        $("#search_TextBox").click(function () {

            $current_WrapperPostion = $(".searchFormWrapper_01").css("left");

            if ($current_WrapperPostion == -280+"px") {
                $(".searchFormWrapper_01").animate({ left: 0 }, 'fast');
            }

            else if ($current_WrapperPostion == 0+"px"){
                $(".searchFormWrapper_01").animate({ left: -280 }, 'fast');
            }
        });
    });

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

DEMO : http://jsfiddle.net/mohammadAdil/KBYP7/1/

$("#search_TextBox").click(function () {
 if ($(".searchFormWrapper_01").css("left") === '-280px'){
        $(".searchFormWrapper_01").animate({
            left: '0px'
        }, 'fast');
    } else if ($(".searchFormWrapper_01").css("left") === '0px') {
        $(".searchFormWrapper_01").animate({
            left: '-280px'
        }, 'fast');
    }
});

Upvotes: 1

Kidi
Kidi

Reputation: 61

hope this help http://jsfiddle.net/xSCFZ/1/ the css attribute isn't necessary an int; you have "0px".. How to get just numeric part of CSS property with jQuery?

the parseInt http://www.w3schools.com/jsref/jsref_parseint.asp

$("#search_TextBox").click(function () {

   var left = parseInt($(".searchFormWrapper_01").css("left"),10);
        if ( left != 0) {
            $(".searchFormWrapper_01").animate({ left: 0 }, 'fast');
        }

        else {
            $(".searchFormWrapper_01").animate({ left: -280 }, 'fast');
        }

});

Upvotes: 1

S&#233;bastien Garmier
S&#233;bastien Garmier

Reputation: 1263

$(document).ready(function () {
    $("#search_TextBox").click(function () {
        if ($(".searchFormWrapper_01").css("left") != '0px') {
            $(".searchFormWrapper_01").animate({ left: '0px' }, 'fast');
        } else {
            $(".searchFormWrapper_01").animate({ left: '-280px' }, 'fast');
        }
    });
});

Your code didn't work because 0 isn't the same as 0px.

Upvotes: 1

helle
helle

Reputation: 11650

when I do something like this I am adding a css-class to be very sure of the state of my div.

<script type="text/javascript">

    $(document).ready(function () {

        $("#search_TextBox").click(function () {


            if ($(".searchFormWrapper_01").hasClass('moved-left') ) {
                $(".searchFormWrapper_01").animate({ left: 0 }, 'fast');
                $(".searchFormWrapper_01").removeClass('moved-left');
            }

            else {
                $(".searchFormWrapper_01").animate({ left: -280 }, 'fast');
                $(".searchFormWrapper_01").addClass('moved-left');
            }
        });
    });

    </script>

A good thing having that class added is, that you can also use css-animations.

Upvotes: 1

billyonecan
billyonecan

Reputation: 20250

Change your if statements to compare the value:

if ($(".searchFormWrapper_01").css("left") != '0px')

fiddle

.css('left') will always return a value, so it will never == 0

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(document).ready(function () {

    $("#search_TextBox").click(function () {
        if ($(".searchFormWrapper_01").css("left") != '0px') {
            $(".searchFormWrapper_01").animate({ left: 0 }, 'fast');
        } else if ($(".searchFormWrapper_01").css("left") == '0px'){
            console.log('a', $(".searchFormWrapper_01"))
            $(".searchFormWrapper_01").animate({ left: -280 }, 'fast');
        }
    });
});

Demo: Fiddle

Upvotes: 1

pdegand59
pdegand59

Reputation: 13019

$(".searchFormWrapper_01").css("left") is not equal to 0 (zero) after a first click but is actually equal to 0px. Just change your equality in the statements and it should be ok.

See fiddle

Upvotes: 2

Related Questions