.fadein with javascript - javascript

Does anyone know how I can make this bit of code have a .fadein property? Preferably .fadein medium speed would be the best. Thanks!
<script>
function LinkOnClick4(box) {
$('#friendresults').load('conversation.php?id=' + box);
}
</script>

First hide the element, load it's contents, and then use the callback function of the load function to fade it back in:
function LinkOnClick4(box) {
//select our element to populate, hide it, load in the new content, then once the new content is loaded, fade it back in
$('#friendresults').hide().load('conversation.php?id=' + box, function () {
$(this).fadeIn(750);
});
}
If you want the element to keep its space in the page (not totally disappear) then you can just set it's opacity rather than using the .hide() and .fadeIn() functions:
function LinkOnClick4(box) {
//select our element to populate, hide it, load in the new content, then once the new content is loaded, fade it back in
$('#friendresults').css({ opacity : 0 }).load('conversation.php?id=' + box, function () {
$(this).fadeTo(1, 750);
});
}
The difference between the two code-blocks is that the first one will allow elements relatively positioned around the #friendresults element to shift when it's hidden, and the second code-block keeps the page from shifting around when the #friendresults element is hidden/shown.
Some docs if you need more help:
.hide(): http://api.jquery.com/hide
.fadeIn(): http://api.jquery.com/fadein
.fadTo(): http://api.jquery.com/fadeto
.css(): http://api.jquery.com/css

Style #friendresults to be hidden then call
$('#friendresults').load('conversation.php?id=' + box, function() {
$('#friendresults').fadeIn()
});

Related

Using jquery to show and then hide div - memorygame

I'm trying to create a memory game using html ccs js and jquery.
The problem I'm having is that when I'm trying to show the div that states if the answer was correct, the div becomes visible like I want but it won't disappear.
I have tree conditions and the problem occurs with every one of them:
$(".wrong").show(function(){
$(this).hide(1000);
});
you can use setTimeout function to hide the element.
setTimeout(function () {
$(".wrong").hide()
}, 1000);

How do I use the properties created by an animate function in that animate function's callback?

I'm working on a page that will have a series of images on it. Each image will be in a container, and each container will be floated left. Since the images will have varying widths, there's no way of knowing how many images will be on each row. When a visitor clicks on an image, it and it's container will expand.
In some situations, this expansion means the clicked image will jump to the following row, and will leave the screen because of it. I'm looking for a way of having the screen follow the clicked image wherever it goes.
Here's my code thus far:
<script type="text/javascript">
$(document).ready(function(){
$(".ExampleImage").toggle(
function(){
var Image = $(this);
var Container = $(this).closest(".ImageContainer");
Image.switchClass("ExampleImageContracted","ExampleImageExpanded",500);
Container.css('height','auto');
Image.queue(scrollToExample(Image));
},
function(){
var Image = $(this);
var Container = $(this).closest(".ImageContainer");
Image.switchClass("ExampleImageExpanded","ExampleImageContracted",500);
Container.animate({'height':'250'},500,scrollToExample(Image));
}
);
function scrollToExample(Image) {
var NewTop = $(Image).closest(".Example").offset();
$('html, body').animate( {
scrollTop:NewTop.top
}, 1000);
}
});
</script>
Note that I've used both a callback in the .animate and also a .queue in an attempt to sequence this correctly. Unfortunately, the value this pulls in for the image container's .offset is the old top, and not the one that occurs after the animation. I'm looking for a way of getting the container's top once the animation has completed. Any advice would be very appreciated.
If you'd like to see the above code in action, here's a link. Note that when you arrive at the page and click Example 4, the screen does not scroll down to Example 4's new location.
http://notiondigitalarts.com/ImageEnlargeTest/
Try changing these two lines:
Image.queue(scrollToExample(Image));
...
Container.animate({'height':'250'},500,scrollToExample(Image));
To:
Image.queue(function() { scrollToExample(Image); });
...
Container.animate({'height':'250'},500,function(){scrollToExample(Image);});
The way you had it you were't passing a callback function to .queue() and .animate(), you were calling your scrollToExample() function immediately and passing its result to .queue() and .animate().
Having said that, I don't think you need to use .queue() at all here.
Note also that within your scrollToExample() function you can say Image.closest(... rather than $(Image).closest(... because Image is already a jQuery object. (Unless you want your function to be able to handle other types of inputs.)

Troubleshooting Jquery Show/Hide With Nested Divs

I've managed to get this working with:
<!--
function resettoggle() {
document.getElementById('imagecarousel').style.display = 'none';
}
function displayImages() {
document.getElementById$('#imagecarousel').style.display="block";
}
$('#imagecarousel').fadeIn("slow", function() {
// Animation complete
$('#portfolio').click(function () {
$("#imagecarousel").toggle();
});
});
-->
and adding onLoad="resettoggle()" to the body tag
I now only need help with 2 things:
I have the div set to fadeIn, but it seems to be flying in at the speed of light.
When the page loads, you see a flicker of the slideshow before it disappears. Not sure how to implement the resettoggle function in a way that keeps the hidden div completely out of view?
you can use fadeToggle():
Display or hide the matched elements by animating their opacity.
$("#portfolio").click(function () {
$("#imagecarousel").fadeToggle("slow");
});

jQuery blinking mouseOver issue

I have a image that has a caption displayed on it. The caption floats over the image and is displayed at the bottom.
I have a jQuery event that when you rollover the image, it displays the caption. Like so:
function showCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeIn('200');
}
And when you roll out:
function hideCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeOut('200');
}
However, when you rollover the caption, it thinks that you have rolled out of the image and fades out. Is there anyway to fix this?
Here's a link: Example
Thanks, Coulton
I took a look at your JS but I couldn't find what triggers the display of the caption - you should be binding the event to the parent div of the image, that way it won't fade out. If it is currently bound to just the image, that's your problem. P.S - it always helps to include a code example.
Here is a fiddle that shows an example of how you could do it. It simply calls stop on the caption element when the mouse enters that element:
$("#caption").mouseover(function() {
$(this).stop();
});
The stop function cancels any animation that is running on the selected element (in this case, the caption element).

Make element fade away then display:none;

I have an element that fades in, its the size of the page and goes over top of the whole page. when you click the close button it should fade out. I have this all working but my issue is when I close it, its opacity is set to 0, but you can still click what was in the element. (I have a couple a tags in it)
So.. your clicking it even though its invisible. How do I make it not appear AT ALL in the code, instead of just going invisible?
What I have:
$('#menu_thumbnails').toggle(function() {
$('div#thumbnails').show();
$('div#thumbnails').stop().fadeTo(500, 1);
}, function() {
$('div#thumbnails').stop().fadeTo(500, 0, hideThumbs());
function hideThumbs() {
$('div#thumbnails').hide();
}
} );
I also tried
$('div#thumbnails').css('display','none');
instead of the .hide() but that did not do anything.
Any help would be great! Thanks
Have you tried it like this:
$('#menu_thumbnails').toggle(function() {
$('div#thumbnails').show();
$('div#thumbnails').stop().fadeTo(500, 1);
}, function() {
$('div#thumbnails').stop().fadeTo(500, 0,
function(){$(this).hide()});
} );
I'm not a jquery expert but I think the problem is that you are using .toggle().
toggle() reacts to the state of your selector's display attribute so if it is visible it will hide and show if it is hidden.
So it will never be "unclickable" with toggle.

Categories

Resources