CODEWITHSUNDEEP
jqueryjquery-animate
user147
user147

Reputation: 1310

Animate CSS value left and opacity doesn't work with jQuery?

Here is the code. I can't make opacity animate as well.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

        <style type="text/css">
            body{
                background: #000;
                color: #fff;
                font-family: Arial, sans-serif;
            }
            .menu{
                position: absolute;
                top: 10px;
                left: 0px;
                z-index: 11;
                width: 700px;
                height: 60px;
            }
            .menu a{
                background-color: #808080;
                margin-bottom: 2px;
                display: inline;
                width: 150px;
                height: 60px;
                color: #fff;
                line-height: 60px;
                text-align: center;
                text-transform: uppercase;
                outline: none;
            }
            .menu a:hover{
                color: #000;
                background-color: #fff;
            }
            #main-wrapper{
                position: absolute;
                left: 1000px;
                top: 10px;
                width: 900px;
                height: 380px;
                background-color: #000;
                opacity: 0.1;
                filter: alpha(opacity=10);
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
                filter: alpha(opacity=10);
                z-index: 9999;
                zoom: 1;
                color: #fff;
            }
            #main-wrapper .active{
                display: block;
            }
            .id-two{
                padding: 10px;
                display: none;
            }
            .id-three{
                padding: 10px;
                display: none;
            }
            .id-four{
                padding: 10px;
                display: none;
            }
            #slider_window{
                position: relative;
                left: 110px;
                width: 85%;
                height: 400px;
                background-color: #8ae234;
                overflow: hidden;
                top: 120px;
            }
        </style>
        <script type="text/javascript">
            jQuery(document).ready(function($){
                var current_elem_class;

                var close_active_page = function(current_id){

                    if(current_id != current_elem_class){
                        var left_position = '1000px';
                        $("#main-wrapper").stop().animate({
                            opacity : 0.1,
                            left :  left_position
                        }, {
                            "duration": 700,
                            //"easing": "easeInOutBack",
                            complete: function(){
                                //alert('complete');
                                if(typeof current_elem_class != 'undefined'){
                                    $("div." + current_elem_class).removeClass('active');
                                    current_elem_class = current_id;
                                    if(current_id != 'id-one'){
                                        open_non_active_page("div." + current_elem_class);
                                    }
                                }else{
                                    current_elem_class = current_id;
                                    if(current_id != 'id-one'){
                                        open_non_active_page("div." + current_elem_class);
                                    }
                                }
                            }
                        });
                    }
                }

                var open_non_active_page = function(elem){

                    var left_position = '10px';

                    $(elem).addClass('active');

                    $("#main-wrapper").stop().animate({
                        opacity : 0.6,
                        left: left_position
                    },{
                        "duration": 700,
                        //"easing": "easeInOutBack",
                        complete: function(){
                            $("#main-wrapper").stop().animate({
                                opacity : 1.0,
                                left: left_position
                            },{
                                "duration": 1000
                            });
                        }
                    });
                }

                $("a.button").bind('click',function(){
                    close_active_page($(this).attr('id'));
                });
            })
        </script>
    </head>
    <body>
        <div id="menu" class="menu">
            <a href="#" id="id-one" class="button close_all">Close all</a>
            <a href="#" id="id-two" class="button">Close all - Open Two</a>
            <a href="#" id="id-three" class="button">Close all - Open Three</a>
            <a href="#" id="id-four" class="button">Close all - Open Four</a>
        </div>
        <div id="slider_window">
            <div id="main-wrapper" class="">
                <div class="id-two">
                    <p><h2>Two</h2><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent adipiscing, magna a porttitor consequat, libero augue gravida lacus, vitae blandit elit eros sed sem. Pellentesque convallis aliquam ante at pretium. Nam at semper ligula. Integer blandit tellus in libero accumsan eleifend. Maecenas hendrerit ante velit. Aenean ultricies vehicula iaculis. Aliquam id orci et lacus egestas elementum. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam viverra sollicitudin tortor, at ultricies enim mollis ut. Etiam facilisis vulputate justo, sed venenatis justo ullamcorper porta.</p>
                </div>
                <div class="id-three">
                    <p><h2>Three</h2><br />Aliquam id orci et lacus egestas elementum. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam viverra sollicitudin tortor, at ultricies enim mollis ut. Etiam facilisis vulputate justo, sed venenatis justo ullamcorper porta.</p>
                </div>
                <div class="id-four">
                    <p><h2>Four</h2><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit lacus, cula iaculis. Aliquam id orci et lacus egestas elementum. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibutor, at ultricies enim mollis ut. Etiam faci</p>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 1163

Answers (2)

CBRRacer
CBRRacer

Reputation: 4659

You need

left : "+=" + left_position

or

left : "-=" + left_position

Upvotes: 2

zdrsh
zdrsh

Reputation: 1667

You don't have to use stop() function on open_non_active_page. In this chain of events when close_active_page is called it will stop any opening animation. 

 var open_non_active_page = function(elem) {

        var left_position = '10px';

        $(elem).addClass('active');

        $("#main-wrapper").animate({
            opacity: 0.6,
            left: left_position
        }, 700, function() {

            $("#main-wrapper").animate({
                opacity: 1.0,
                left: left_position
            }, {
                queue: false,
                duration: 1000
            });
        });

    }

http://jsfiddle.net/ywre2/5/

Upvotes: 1

Related Questions