Crimson Cardinal

Crimson Cardinal's News
  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that has been used in the blog.
  • Bloggers
    Bloggers Search for your favorite blogger from this site.
  • Login

Programming jQuery animated boxes

Posted by on in Technology
  • Font size: Larger Smaller
  • Hits: 4588
  • Subscribe to this entry
  • Print

There are several related topics I will cover in this walk-through. I will show you how to have create an animated div, that looks like it is rising out of another div (in this instance a strip of grass) on mouse over. I will also cover how to make the entire div a clickable link that opens in the current browser window as well as how to change the cursor to a pointer (so your users know the div is clickable).

First we want to call your jQuery script. I recommend using Google's jQuery, for the reasons covered here

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

Here I created a CSS class to set the initial state for the box. Note: You can set the initial state with jQuery, but I found it easier to just use a CSS class. If you are reading this, I am going to assume you are familiar with how to leverage CSS. If you are not, I would reccomend starting here. Having said that, the only item I will explain here is the z-index. I set it to -1 for the initial state so that the div that I want to animate will appear to be behind div I will be using to 'rise' behind.

  <style type="text/css">
    .start {
      margin-top: 75px; 
      float: left;
      margin-right: 35px;
      height: 25px;
      width: 150px; 
      padding: 10px;
      overflow: hidden;
      background: url('/blog/images/box-bg.png') no-repeat scroll center top;
      z-index: -1;
    }
  </style>
  

In this next set of code, I have defined the main parent div, and assigned it style variables directly. Note: you can create an id or class in CSS to do this, but again it is personal preference, it will have no impact on the performance of your animation

  <div style = "background: url('/blog/images/grass-line.png') no-repeat scroll left bottom; 
  margin-top: 10px; 
  height: 130px; 
  padding-left: 15px;
  width: 200px; 
  float: left; 
  border: 1px solid #DFDFDF;
  border-radius: 5px 5px 5px 5px;">
  
This section is where I create the box that will actually be animated. I have one box here, but you will need to modify your code based on whatever fits the layout of your site. If you look at line 10, that is where I've written the line of code to convert the cursor to a pointer so it looks like a link.
  <div style = "background: url('images/grass-line.png') no-repeat scroll left bottom; 
  margin-top: 10px; 
  height: 130px; 
  padding-left: 15px;
  width: 200px; 
  float: left; 
  border: 1px solid #DFDFDF;
  border-radius: 5px 5px 5px 5px;">
  
  <div id="box1" class="start" style="cursor: pointer; color: #000000;">
  <p style="margin-top: -1px; font-size: larger;">
  <strong>First Box</strong></p>
  <p style="margin-top: -10px; padding-left: 3px;">To bear, the proud makes of discorns, puzzles office, thers the with make</p>
  
  <div style="background: url('/blog/images/grass-small.png') no-repeat scroll left bottom;
  float: left;
  height: 20px;
  margin-top: -12px;
  width: 980px;">    </div >
  </div>
  
  <script type ="text/javascript">
    var box1 = $('#box1');
    
    $(box1).mouseover(function () {
      $(this).animate({
        marginTop: "10px",
        height: "90px"
      }, {queue:false, duration:800} ).mouseout(function () {
        $(this).animate({
          marginTop: "75px",
          height: "25px"
        }, {queue:false, duration:800});
      });});
    

If you want to use your animated boxes as part of your navigational system, here is where you make the entire div clickable, instead of having the title or text be your link points.

  
     $(box1).click(function() {
       window.location.href = "stuff.html";
     });
  </script>
</body>
  
I also need to create the div that will lay 'on top' of the animation divs to give it that coming out of the ground effect, which is what I am doing here.
  
  <div style="background: url('/blog/images/grass-small.png') no-repeat scroll left bottom;
  float: left;
  height: 20px;
  margin-left: -15px;
  margin-top: -2px;
  width: 980px;">    </div >
  </div>
  

Now we launch into creating the actual jQuery to execute the movement. Some browsers, such as Firefox, do not always smoothly handle the rendering of jQuery animations. Therefore, I assigned the div ids to variables in order to help improve performance.

Next, I created the animation itself to execute the box code. We are looking for a mouseover on the first box here, and if the mouse cursor enters the box we will begin the animation. A more complete tutorial explaining the syntax and use of the animate function can be found here. But I will keep it short for the purposes of this particular article.

  • marginTop & height: These set the final appearance state of the box we are mousing over
  • queue:false: If you do not set the queue to false, your boxes will appear to be resizing themselves on their own, long after you've hovered over the box and left. This is very apparent if you were to remove the queue and move your cursor across the boxes quickly
  • duration: This toggle will tell jQuery how long (in milliseconds) to take in order to complete the animation

Thanks to functionality of jQuery, we can append several functions together, in this case I've added the mouseout function to the end of the mouseover function. If you so desire, you could create two CSS classes .start and .end and use jQuery to addClass and removeClass. Your function will work either way. For the purposes of this article I've included the code here so you do not have to scroll up to see what my targets are.

      <script type ="text/javascript">
        var box1 = $('#box1');
        
        $(box1).mouseover(function () {
          $(this).animate({
            marginTop: "10px",
            height: "90px"
          }, {queue:false, duration:800} ).mouseout(function () {
            $(this).animate({
              marginTop: "75px",
              height: "25px"
            }, {queue:false, duration:800});
          });});
        

If you want to use your animated boxes as part of your navigational system, here is where you make the entire div clickable, instead of having the title, text or both be your link points.

  
         $(box1).click(function() {
           window.location.href = "stuff.html";
         });
      </script>
      </body>
      

Here is what the code actually produces

Finally, I have the code all in one place for your viewing pleasure. Happy coding!

        <div style = "background: url('images/grass-line.png') no-repeat scroll left bottom; 
        margin-top: 10px; 
        height: 130px; 
        padding-left: 115px;
        width: 890px; 
        float: left; 
        border: 1px solid #DFDFDF;
        border-radius: 5px 5px 5px 5px;">
        
        <div id="box1" class="start" style="cursor: pointer; color: #000000;">
        <p style="margin-top: -1px; font-size: larger;">
        <strong>First Box</strong></p>
        <p style="margin-top: -10px; padding-left: 3px;">To bear, the proud makes of discorns, puzzles office, thers the with make</p>
        
        <div style="background: url('/blog/images/grass-small.png') no-repeat scroll left bottom;
        float: left;
        height: 20px;
        margin-left: -115px;
        margin-top: -12px;
        width: 980px;">    </div >
        </div>
        
        <script type ="text/javascript">
          var box1 = $('#box1');
          
          $(box1).mouseover(function () {
            $(this).animate({
              marginTop: "10px",
              height: "90px"
            }, {queue:false, duration:800} ).mouseout(function () {
              $(this).animate({
                marginTop: "75px",
                height: "25px"
              }, {queue:false, duration:800});
            });});
          
          $(box1).click(function() {
            window.location.href = "stuff.html";
          });
        </script>
      </body>
        
0

Comments

Web Applications

Web Application Creation

We are experienced web application developers. Whether you need a desktop application converted to a web application or something simple, we have the right solution for your business.

Web Design

Looking for a unique design to make your website stand out from the crowd? We can create it for you at a reasonable rate!

Search Engine Optimization

Looking to grow your organic search traffic? Want to launch a new paid traffic campaign? We can help you manage your campaigns so you can focus on your business