Skip navigation

Dreamweaver

harvey waxman

Currently Being Moderated

Transition speed

Jun 20, 2012 6:46 AM

I can't seem to change the speed of this transition: http://dinghydogs.com/indexjquery.html.

I changed "slow" in this line: $(this).stop().animate({opacity: "0.0"}, 'slow'); to '3000' but it makes no difference.

Thanks

499 Views 6 Replies Latest reply: harvey waxman, Jun 20, 2012 6:03 PM

Replies

Currently Being Moderated

1. Nancy O.,

Jun 20, 2012 12:10 PM in reply to harvey waxman

Report

Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(),

the .animate() method does not make hidden elements visible as part of the effect.

.animate is typically used to move or resize a selector from here to there with a default duration speed of ('slow'), ('normal)', ('fast)' or with a custom integer in milliseconds ('2500').

Simple animation demo:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery .animate</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
 </head>
<body>
<p>Layer1 is behind Layer2.</p>
 <div id="clickme">
<button>Click to animate</button>
</div>
 <div id="Layer1" style="width: 156px; height:130px; position:absolute; left:10px; top: 100px; background-color:#9C0; text-align:center">
<h1>Layer1</h1>
</div>
 <div id="Layer2" style="width: 156px; height:130px; position:absolute; left:10px; top: 100px; background-color: #FF0; text-align:center">
<p> </p>
<h2>Layer2</h2>
</div>
 <script type="text/javascript">
$('#clickme').click(function() {
  $('#Layer2').animate({
    opacity: 0.25,
    height: 'toggle',
    opacity: 'toggle'
  }, 2500, function() {
  });
});
</script>
</body>
</html>

Nancy O.

Mark as:

Currently Being Moderated

2. harvey waxman,

Jun 20, 2012 1:05 PM in reply to Nancy O.

Report

Thank you so much, Nancy, as if you had nothing better to do than help an old curmudgeon.

I notice that there is no Z-index specified.

I use .animate in my code [$(this).stop().animate({opacity: "0.0"}, '2500');] but the timings do nothing whereas in your code they do what I expect them to do. What am I doing wrong?

|
Mark as:

Currently Being Moderated

3. Nancy O.,

Jun 20, 2012 2:56 PM in reply to harvey waxman

Report

Use ID #fade to trigger image ID #taper like so:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<!--jQuery latest-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<style type="text/css">
 #fade {position:relative;}

/**position where desired**/
#fade img {position:absolute; top: 100px; left: 200px;}

</style>
</head>

<body>

<div id="fade">
<img id="reg" src="http://dinghydogs.com/Images/iindexreg.jpg">
<img id="taper" src="http://dinghydogs.com/Images/iindextaper.jpg">
<!--end fade--></div>
   
<!--jQuery fade function, put this above end of body-->
<script type="text/javascript">
$("#fade").hover(function(){
    $("#taper").animate({
     opacity: 0.25,
     opacity: 'toggle'
  }, 2500, function() {
    });
});
</script>

</body>
</html>

Nancy O.

Mark as:

Currently Being Moderated

4. harvey waxman,

Jun 20, 2012 3:40 PM in reply to Nancy O.

Report

Perfect! You're a treasure.

If you have time:

1. How did you lock the (image) layers together? Does the order of creation determine which is on top?
2. The layers panel shows 2 layers but no z-index or "eye" visibility. When I changed the order in the list, the z-index appeared, same for both, but the taper remains on top. I don't understand.
3. The opacity starts at 0.25? Why not 1? It seems to make no difference.

The effect is just what I had envisioned. Using click instead of hover does what I'd expect it to do. Is there a good resource to learn all these commands/options?

Thanks again.

|
Mark as:
Currently Being Moderated

5. Nancy O.,

Jun 20, 2012 5:01 PM in reply to harvey waxman

Report

Glad it works for you.

#1 Images are positioned absolute with same top & left coordinates so images are stacked by default.

#2 The last <img src> is visible on page load. The first <img src> is a layer below. To reverse stacking order, put "taper" first and "reg" second. Change jQuery to this:
$("#reg").animate({

#3 I probably should have used opacity: 0 instead of 0.25.

I think jQuery's site has the best basic resource material.
http://docs.jquery.com/Main_Page

Nancy O.

|
Mark as:
Currently Being Moderated

6. harvey waxman,

Jun 20, 2012 6:03 PM in reply to Nancy O.

Report

Nancy O. wrote:

Glad it works for you.

#1 Images are positioned absolute with same top & left coordinates so images are stacked by default.

When I tried that on my page they wouldn't line up. I had to nudge one until it looked right in the browser

#2 The last <img src> is visible on page load. The first <img src> is a layer below. To reverse stacking order, put "taper" first and "reg" second. Change jQuery to this:
$("#reg").animate({

They appear locked, even moving together when I drag them. How does that happen? The layer dialogue box shows two layers but the code has the images in one div.

#3 I probably should have used opacity: 0 instead of 0.25.

It looks the same either way.

I think jQuery's site has the best basic resource material.
http://docs.jquery.com/Main_Page

Thanks again
Nancy O.

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points

Dreamweaver

Transition speed

Jun 20, 2012 6:46 AM

More Like This

Bookmarked By (0)

Answers + Points = Status