asked on

java jquery

---------------------------------------
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery-1.9.0.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('a#tog').toggle(function() {
$('#result2').fadeIn('slow');
return false;
},
function() {
$('#result2').fadeOut('slow');
return false;
});
});
</script>

<script type="text/javascript">
$(function() {
$('a.link').click(function(e) {
e.preventDefault();
$.get($(this).attr('href'),{},function(data) {
$('#result').html(data);
}); // <= missing in original script
});
})</script>

</head>
<body>
<div><a class="link" href="test.txt">Click</a></div><br />
<div align="right" style="width:200px; background:#00cc33;">dfdfd</div><br />
<div id="result" style="width:400px; position:absolute;left:250px; top:100px; background:#00CC33;"></div>

 <div align="right" style="width:100px; background:#00CC33; id="result2; position:relative;left:100px; top:15px;">ggggg</div>
</body>
</html>
-------------------------------------------
I am trying to get this element in the above page to fade in / out with the jquery function:

<script type="text/javascript">
$(function() {
$('a.link').click(function(e) {
e.preventDefault();
$.get($(this).attr('href'),{},function(data) {
$('#result').html(data);
}); // <= missing in original script
});
})</script>

Ray Paseur

Have a look at this page.
http://www.landonbaseball.com/

It creates a fade-in / face-out effect, presenting a caption over the banner image when you mouse-over the image. You can use view source to see the jquery statements near line 45, showing in the snippet below.

<!-- FADING CAPTIONS ADDED 2012-03-17 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
  $("#banner_image").ready(function () {
  $("#banner_image").fadeTo(3000, 0.001, "swing");
  $("#banner_image").hover(
        function() {
            $("#banner_image").stop(true).fadeTo(250, 1.0, "swing");
        },
        function() {
            $("#banner_image").fadeTo(2000, 0.001, "swing");
        }
     );
  });
</script>

Open in new window

In my experiments with fadeTo(), I found that a value of 0.001 was sufficient to become invisible and a value of 0 created some quirkiness when I wanted the page element to fade back into view.

HTH, ~Ray

doctorbill

ASKER

So how do I make my element in the page above fade in and out - what code changes are necessariy?

SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Ray Paseur

membership