Speed up development with full-stack environments for every branch.

Learn More

Adding a slide effect to an image using jQuery UI

Forked from How to use the jQuery UI Slider.

8230 Runs 21625 Views 6176 Copies
Saved

Saved

pg1 45

pg1
published 4 years ago

<!doctype html>
<html>
<head>

    <title>Adding a slide effect to an image using jQuery UI</title>
    
    <style>
        body{
            text-align: center;
        }
        
        input{
            padding:5px 10px;
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;           
        }
        
        .image-wrap{
            position: relative;
            margin:0 auto;
            width:900px;
        }

        .image{
            position: absolute;
            left:150px;
        }
        

    </style>

</head>
<body>

    <input type="button" class="slide-left" value="&laquo; Slide Left" /> 
    <input type="button" class="slide-center" value="Center"> 
    <input type="button" class="slide-right" value="Slide Right &raquo;"> 
    
    <!-- we create a wrapper for the image so it can move in left and right -->
    <div class="image-wrap">
        <!-- image  position is absoulte --> 
        <img src="1.jpg" alt="photo1" class="image" />
    </div>   

    <!-- 
        We use Google's CDN to serve the jQuery js libs. 
        To speed up the page load we put these scripts at the bottom of the page 
    -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    <script>

        //DOM loaded 
        $(document).ready(function() {
            
           
            //attach click event to slide buttons
            $('.slide-left').click(function(){
                
                //animate image position left
                $('.image').animate({
                    left: 0
                }, 500);

            });

             $('.slide-center').click(function(){
                
                //animate image position to center
                //our image is 600px and frame is 900px
                //900-600=300 and 300/2=150
                //so we set image left to 150px
                $('.image').animate({
                    left: 150
                }, 500);
            });

            $('.slide-right').click(function(){
                
                //animate image position right
                $('.image').animate({
                    left: 300
                }, 500);
            });
           
        });

    </script>

</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).