jQuery or onClick Div Fade - javascript

I apologize if this is in the wrong section..
Could someone possibly point me towards a script or a tutorial on this:
when I click on something, say for instance an "x", I'll click it, then it fades away on click.
If you understand what I mean, could someone point me in the right direction please?
Thanks!

Please familiarize yourself with Google.
Then familiarize yourself with http://docs.jquery.com/Tutorials:How_jQuery_Works
Try out some code on http://www.jsfiddle.net

refer
$('someclass/id').click(function() {
$('someclass/id').fadeOut();
});
check this
$('a').toggle(
function() { $('#us').fadeIn(); },
function() { $('#us').fadeOut(); }
);
.fadeToggle()
show( effect, [options], [speed], [callback] )jQuery UI

Refer this: http://www.webdesignerwall.com/demo/jquery/
There is small tutorials for different UI elements with good explanation.

This describes how to fade in and fade out an element on click
$(document).ready(function(){
$("#elemntID").click(function() {
$("#ID_of_element_need_to_fade_in").fadeIn("slow");
});
$("#elemntID").click(function() {
$("#ID_of_element_need_to_fade_out").fadeOut("slow");
});
});

Its easy you could have googled that.
jQuery('#divId').click(function(){
jQuery(this).hide('slow'); //this will give a little animated effect.
// or
jQUery(this).fadeOut('slow');
});
http://api.jquery.com/fadeOut/
http://api.jquery.com/hide/

use
$('#id').click(function() {
$('#id').fadeIn();
$('#id').fadeOut();
});
[link][1]
<script>
$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
$("p:last").fadeToggle("fast", function () {
$("#log").append("<div>finished</div>");
});
});
</script>

Related

Jquery show/hide hover or mouse enter issue

Ok so im trying to get some text that is hidden to display when the mouse enters the div then hide when it leaves
so far ive got this on my fiddle
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
Thanks any help would be great
You Should Read Basic of JavaScript
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
})//added
Updated Demo
You were missing a });
Also, you can simplify your code to:
$(document).ready(function () {
$(".image").mouseover(function () {
$(".hover").show();
}).mouseout(function () {
$(".hover").hide();
});
});
BTW, your HTML is broken. Fix that first.
Both your HTML and JS code are badly written. And you didn't include jQuery is your jsfiddle, which means that '$' isn't recognized.
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
});
$(".image").mouseout(function(){
$(".hover").hide();
});
});
You can test it here: http://jsfiddle.net/5PR5E/3/

Jquery click function problems

New to jQuery I am trying to have an image that when I click on it I want to move up a certain amount of pixels then when another image is clicked go back down to the original state?
so far i have tried this
$(".wrap").click(function(){
$(this).css("margin-top", "-15px");
});
I just cant figure out how to make it move down to its original place
thanks
Try to do:
$("img.wrap").click(function(){
$("img.wrap").css("margin-top", "0px");
$(this).css("margin-top", "-15px");
});
For better look use Jquery animate
$( ".wrap" ).click(function() {
$(this).animate({
top: "15px",
}, 500);
});
Place it in document.ready and use latest JQuery source file:
<script type="text/javascript>
$(document).ready(function(){
$(".wrap").on('click',function(){
$(this).css("margin-top", "-15px");
});
});
</script>
Try to wrap it in ready()
And css() may not apply margins so use javascript marginTop like,
$(function(){
$(".wrap").click(function(){
this.style.marginTop='-15px';
});
});
Live Demo
As per my understanding of your question. I've created a fiddle to help you find a solution. Please have a look at the fiddle and the code snippet below. Appreciate your time.
$('.sample img').bind('click',function(){
$('.sample img').removeAttr('style');
$(this).css('top',-5);
});
Do you want like this:
var mt = $('.wrap').css('margin-top');
$(".wrap").click(function(){
if($(this).css('margin-top') == '-15px'){
$(this).css('margin-top',mt);
} else {
$(this).css("margin-top", "-15px");
}
});

How to fade in with jQuery

My idea is to fade in to the tab that is loaded.
This code seems like it should work, but it doesn't fade in. What is wrong?
$(document).ready(function() {
$("#logo").click(function(event) {
$("#central").fadeIn("slow").load('page.html');
});
});
You have to hide #central first, before fading it in:
$('#central').hide().fadeIn('slow').load('page.html');
Jacob's answer is right, of course, but I'd hazard a guess that you probably want to load the html and then fade it in?
$(document).ready(function() {
$("#logo").click(function(event) {
$("#central").load('page.html', function() {
$(this).fadeIn("slow");
});
});
});

JQuery missing : after property ID

So I am working with some jquery code to do a simple hide of a p and a show of a p. I am simple adding a class called showp and showing it while making sure the others are not shown by hiding them first. But I keep getting an error missing : after property ID. Any help would be greatly appreciated.
$(document).ready({
$("#phone").click(function(){
$(".hide2").addClass(".hide2").hide("slow");
$(".hide3").addClass(".hide3").hide("slow");
$(".hide1").addClass("showp").show("slow");
});
});
Change this:
$(document).ready({
To this
$(document).ready(function(){
Try this:
$(document).ready(function() {
$("#phone").click(function() {
$(".hide2, .hide3").hide();
$(".hide1").show();
});
});
Your document ready is invalid.
$(document).ready(function() {
// stuff here.
});
Or better yet, a shorthand:
$(function() {
// stuff here.
});

Force jQuery content slider to pause on hover

I would be grateful if someone can help with with some javascript code. I have a content slider which can be found here:-
link text
This works fine but I would like to change the following code so that it pauses on hover. Any ideas?
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
Thanks in advance of your help.
Kind regards
Jonathan
What you're looking for is the stop method. Something along the lines of:
$(".ui-tabs-panel").mouseover(function(e) {
if($(this).is(':animated')) {
$(this).stop();
}
});
Looks like you're using jQuery.UI. Here's how i've done it in the past using the same library (courtesy of this tutorial):
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});

Categories