jQuery Forum

Hi,

I have 6  boxes with text inside that animate one by one. I was wondering how I can combine them into an array to condense the code. I would also like to animate the text in a similar way to the boxes to make it look more graceful.

If anyone could help much appreciated!

   <script> 

        $(document).ready(function() {

          $('.one').animate({

            opacity: 1,

            height : "13em", 

            width : "16em"}, 

            '200');

        });

        $(document).ready(function() {

          $('.two').delay(200).animate({

            opacity: 1,

            height : "13em", 

            width : "16em"}, 

            '200');

        });

        $(document).ready(function() {

          $('.three').delay(400).animate({

            opacity: 1,

            height : "13em", 

            width : "16em"}, 

            '200');

        });

        $(document).ready(function() {

          $('.four').delay(600).animate({

            opacity: 1,

            height : "13em", 

            width : "16em"}, 

            '200');

        });

        $(document).ready(function() {

          $('.five').delay(800).animate({

            opacity: 1,

            height : "13em", 

            width : "16em"}, 

            '200');

        });

        $(document).ready(function() {

          $('.six').delay(1000).animate({

            opacity: 1,

            height : "13em", 

            width : "16em"}, 

            '200');

        });

    </script> 

Hi,

I have modals on the images on this page:

I was wondering how I can rid the the images of their modal links when viewed on mobile as the pics don't need to be shown any larger at that size.

I thought about hiding all the content and displaying a simplified version with display:none in the media queries but this seems as though it's long winded and using too much code.

Cheers if you can help.

R