-1

i'm trying to make a image to fade from left on load to some point on the screen. My code seems right,but is not work,nothing happens,please help: This is my function for the animatetion of the image :

<script src="http://code.jquery.com/jquery-1.10.1.min.js">
   $(document).ready(function(2000,slow){
    $(".img-fade").animate({left:200, opacity:"show"}, 1500);
});
    </script>

and here is where i implement it in html:

<div class="latest-updates-portofolio " >
<div class=".img-fade">
<img src="img/logo.png"  width="180px" height="180px">text
</div>
</div>

and the .img-fade class is a blank class just to do the function. And one more quesetion,how do i make it animate to left after 2 seconds after the page has finish loaded? Thanks.

vals
  • 61,425
  • 11
  • 89
  • 138
Victor
  • 468
  • 1
  • 5
  • 17
  • Check the console : `Uncaught SyntaxError: Unexpected number ` -> [Fiddle](http://jsfiddle.net/8mRyb/) – Vucko Jul 30 '13 at 19:46
  • `
    ` remove `.` not needed
     – Praveen Jul 30 '13 at 19:47
  • Added to all of the many other issues in your code. You have `src` attribute on your script as well as content. The content of the script is likely ignored. http://stackoverflow.com/questions/6528325/what-does-a-script-tag-with-src-and-content-mean – James Montagne Jul 30 '13 at 19:55

4 Answers4

1

Your first issue which is masking the many other issues pointed out by other answers is this:

<script src="http://code.jquery.com/jquery-1.10.1.min.js">
   // YOU HAVE CODE HERE
</script>

If your script tag has a src attribute, then the contents of the tag (your code) will be ignored. Because of this, your actual code never executes.

http://jsfiddle.net/t9Z8F

It should be like this:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
   // YOUR CODE GOES HERE
</script>

One script tag to include jquery and another for your code. Once you fix this, you will see your syntax errors on the console and can begin to debug all of your issues.

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • +1 Nice, Sharp eyes :) I missed it seeing the jsfiddle in comments. – Praveen Jul 30 '13 at 20:07
  • Got a question i want it to apply it two several divs,and they overlap,how can i make that not happen ? thnx. – Victor Jul 31 '13 at 17:16
  • @ЗапорожанВиктор That sounds like a separate question which you should post separately complete with full details and a working example so it's easier to answer. – James Montagne Jul 31 '13 at 17:18
  • @JamesMontagne ok thnx i will post new one.tought not to spam the threads.thnx. – Victor Jul 31 '13 at 17:27
0

by using a setTimeout function.
this will delay your animations

$(function(){  // DOM ready shorthand

    setTimeout(function(){
        $(".img-fade").animate({left:200, opacity:1}, 1500);
    }, 2000 ); // wait 2s before animating

});

Theremore you cannot have a dot in your class : <div class=".img-fade"> use instead:

<div class="img-fade">

Additionally if you plan to animate an element using it's left property (instead of margin-left) make sure to set a CSS position: (relative or absolute) for your element!

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
0

Your <div class=".img-fade"> div shouldn't have a "." at the beginning of the name. It should look like this: <div class="img-fade"> - Everything else looks good. Your jQuery wasn't finding any elements matching "img-fade," because the actual name was ".img-fade".

James Rasmussen
  • 651
  • 1
  • 9
  • 22
0
$(document).ready(function(2000,slow){  //syntax error

you can't pass parameter within function() it is a syntax error

Uncaught SyntaxError: Unexpected number .

Try this 

   $(document).ready(function () {
        $(".img-fade").animate({
            left: 200,
            opacity: "show" // wrong instead use 0
        }, 1500);
    });

opacity: "show" is wrong, instead use opacity: 0

Check this JSFiddle

Praveen
  • 55,303
  • 33
  • 133
  • 164