I am using jquery to swap text on hover, as follows:
$("#bottomMiddle").hover(function(){
$("#rightHeading").text("CMS heading");
$("#rightContent").text("CMS content");
},function(){
$("#rightHeading").text("This is the original heading");
$("#rightContent").text("This is the original content");
});
This works but the effect is harsh and would like to fade the text in and out, I have tried using .fadeIn(); but had no success. Is there any way to use this hover swap and get it to fade at the same time?
You can achieve the desired effect by using callbacks.
This executes the .text() call when the .fadeOut() is complete, just before the .fadeIn():
$("#bottomMiddle").hover(function(){
$("#rightHeading").fadeOut(function() {
$(this).text("Hello").fadeIn();
});
$("#rightContent").fadeOut(function() {
$(this).text("World").fadeIn();
});
},function(){
$("#rightHeading").fadeOut(function() {
$(this).text("This is the original content").fadeIn();
});
$("#rightContent").fadeOut(function() {
$(this).text("This is the original content").fadeIn();
});
});
button {
width: 300px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="bottomMiddle">Button</button>
<div id="rightHeading">This is the original heading</div>
<div id="rightContent">This is the original content</div>
You can do it easily with jQuery animations. Check this jsfiddle.
Your code could looks like this:
$("#bottomMiddle").hover(function(){
$("#rightHeading").hide().text("CMS heading").fadeIn(200);
$("#rightContent").hide().text("CMS content").fadeIn(200);
},function(){
$("#rightHeading").hide().text("This is the original heading").fadeIn(200);
$("#rightContent").hide().text("This is the original content").fadeIn(200);
});
Another solution, but really similar to Joel Almeida. I tried to better structure the code, so it is more obvious what is going on.
var heading = $("#rightHeading")
var content = $("#rightContent")
var both = heading.add(content)
var animDuration = 300 // ms
var transition = function(headingText, contentText) {
both.fadeOut(animDuration, function() {
heading.text(headingText)
content.text(contentText)
both.fadeIn(animDuration)
})
}
$("#bottomMiddle").hover(
function() {
transition('CMS heading', 'CMS content')
},
function() {
transition('This is the original heading', 'This is the original content')
}
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bottomMiddle">HOVER</div><br />
<div id="rightHeading">This is the original heading</div>
<div id="rightContent">This is the original content</div>
Related
Lets say I got this little span that I can't modify from its structure or give any surrounding elements. It is like it is. But now I want to display another Text in it and I want them to toggle between each other.
Example: First text stays for 1 seconds -> it gets faded out and the other text will be displayed -> repeat to infinity.
Is it possible to archive this with just the toggle() function? I tried around a bit but nothing really works.
$(function() {
$('#test').delay(1000).fadeOut(750, function() {
$(this).text('Some other text!').fadeIn(500);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<span id="test">This Text!</span>
You can do it like this.
Hope this will help you
setInterval(function() {
$("#test").fadeOut(750, function() {
if ($(this).text() == "This Text!") {
$(this).text("Some other text!").fadeIn(500);
} else {
$(this).text("This Text!").fadeIn(500);
}
});
}, 1500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<span id="test">This Text!</span>
My simple source is
$lol = $(".lol");
$lol.each( function(index) { $(this).delay(200*index).css("color", "blue"); } );
The Fiddle is here
http://jsfiddle.net/ra53Lzhw/
I am trying to make each of the word to change its colour to blue one at a time. How can I do that?
And how can I do that, so it changes gradually, instead of suddenly changing to blue? Thanks a lot, Stack Overflow!!
Something like this:
$lol = $(".lol");
$lol.each( function(index) {
$(this).delay(200 * index).queue(function(next) {
$(this).css("color", "blue");
next();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class=lol> Div One </div>
<div class=lol> Div Two </div>
<div class=lol> Div Three </div>
<div class=lol> Div Four </div>
Have a look at this fiddle.
Basically you use setInterval and jQuery selectors to color the text lines ine by one.
var hnd = setInterval ( function () {
$(".lol:not(.blu):first")
.addClass("blu")
;
}, 2000);
setTimeout ( function () { clearInterval(hnd);
$(".lol").removeClass("blu"); }, 10000 );
The css clause:
.blu { color: blue; }
What i am trying to achieve is, i want to make it work like star rating. When you enter mouse star becomes yellow, when you leave mouse it turns gray and then if you click it again becomes yellow.
Not getting how to achieve it, I have added code to show you what i have tried so far.
JSfiddle
$(".na").hover(
function () {
$(this).addClass("clickstar");
},
function () {
$(this).removeClass("clickstar");
}
);
$(".na").on("click",function(){
$(this).toggleClass("clickstar");
});
.clickstar{
background: #00A1EF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="na" style="border:1px solid #c0c0c0;border-radius:50%;width:115px;height:115px;display:inline-table;margin-right:5px;"></div>
You should consider using 2 different classes, .hoverstar and .clickstar, then :
http://jsfiddle.net/xLxbw216/1/
You would have one class for each case, which seems more logical ?
You can also make it simpler by removing .hover() method, and do it with CSS :
http://jsfiddle.net/xLxbw216/8/
I probably choose the second one, even if the first solution seems to be more "readable".
You can do it like this:
$(".na").on("click",function(){
$(this).toggleClass("clickstar");
});
Fiddle Example
You should use a different class for permanent start and hover star
I have created a working example in JSfiddle
$(".na").hover(
function () {
var $this = $(this);
if (!$this.hasClass("permstar")) {
$this.addClass("clickstar");
}
},
function () {
var $this = $(this);
if (!$this.hasClass("permstar")) {
$(this).removeClass("clickstar");
}
}
);
$(".na").on("click",function(){
$(this).toggleClass("permstar");
});
add/remove class on hover events was conflicting with on click event, so i have moved the hover functionality to css
css:
.clickstar{
background: #00A1EF;
}
.na:hover{
background: #00A1EF;
}
live demo:
http://jsfiddle.net/dreamweiver/xLxbw216/7/
Happy Coding :)
What I'd like to do is have all elements of class collapsible_list not displayed by default (with one exception... see below*), and then toggle their display when their parent <div class="tab_box"> is clicked. During the same click, I'd also like for every other element of class collapsible_list to be hidden so that only one of them is expanded at any given time.
*Furthermore, when the page initially loads I'd also like to check to see if an element of collapsible_list has a child a element whose class is activelink, and if there is one then I'd like that link's parent collapsible_list element to be the one that's expanded by default.
Here's some sample html code:
<style>
.collapsible_list {
display: none;
}
.collapsible_list.active {
display: block;
}
</style>
<div id="sidebar">
<div class="tab_box">
<div class="collapsible_tab">2014</div>
<div class="collapsible_list panel-2014">
1
2
3
</div>
</div>
<div class="tab_box">
<div class="collapsible_tab">2013</div>
<div class="collapsible_list panel-2013">
<a class="activelink" href="/2013/1">1</a>
2
3
</div>
</div>
</div>
And here's where I'm currently at with the javascript (although I've tried a bunch of different ways and none have worked like I'd like them to):
$(document).ready(function() {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active");
$(".tab_box").click(function() {
$(this).children(".collapsible_list").toggleClass("active").slideToggle("slow", function() {
$(".collapsible_list.active:not(this)").each(function() {
$(this).slideToggle("slow");
});
});
});
});
I hope that's not too confusing, but if it is then feel free to let me know. Any help is much appreciated.
Since you have a dom element reference that needs to be excluded use .not() instead of the :not() selector
jQuery(function ($) {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active").show();
$(".tab_box").click(function () {
var $target = $(this).children(".collapsible_list").toggleClass("active").stop(true).slideToggle("slow");
//slidup others
$(".collapsible_list.active").not($target).stop(true).slideUp("slow").removeClass('active');
});
});
Also, instead of using the slide callback do it directly in the callback so that both the animations can run simultaniously
Also remove the css rule .collapsible_list.active as the display is controlled by animations(slide)
Try This.
$('.collapsible_tab a').on('click', function(e){
e.preventDefault();
$('.collapsible_list').removeClass('active')
$(this).parent().next('.collapsible_list').toggleClass('active');
});
Fiddle Demo
I think your code would be less complicated if you simply remembered the previously opened list:
jQuery(function($) {
// remember current list and make it visible
var $current = $('.collapsible_list:has(.activelink)').show();
$(".tab_box").on('click', function() {
var $previous = $current;
// open new list
$current = $('.collapsible_list', this)
.slideToggle("slow", function() {
// and slide out the previous
$previous.slideToggle('slow');
});
});
});
Demo
I have two divs with individual id's and a class to style the same.
foo_1 has a z-index so it's above foo_2.
<div id="foo_1" class="foo"><p>I'm awesome.</p></div>
<div id="foo_2" class="foo"><p>No, I am.</p></div>
What I'd like to do is to have foo_1 fade out with foo_2 behind it.
I did try this;
HTML
<div id="foo_1" class="foo"><p>I'm awesome</p></div>
<div id="foo_2" class="foo" style="display: none;"><p>No, I am.</p></div>
jQuery
$(document).ready(function()
{
setTimeout(function()
{
$("#foo_1").fadeOut("slow", function ()
{
$("#foo_1").remove();
$("#foo_1").html($("#foo_2").text());
$("#foo_1").show();
});
}, 5000);
});
Thanks!
setTimeout(function()
{
$("#foo_1").fadeOut("slow", function ()
{
// remove $("#foo_1").remove();
// line from code,
// because, its removing #foo_1 from dom,
// so in next strp you can't catch it
// $("#foo_1").remove();
$("#foo_1").html($("#foo_2").text());
$("#foo_1").show();
});
}, 5000);
Sounds to me like what you're doing is a bit of an overkill.
Let me summarize: You have two divs, they are positioned at the same spot, but only #foo_1 is visible because it's on top. You now want to hide #foo_1 to reveal #foo_2.
So it should be sufficient to make #foo_2 visible while fading out #foo_1:
setTimeout(function() {
// Make #foo_2 visible
$('#foo_2').show();
// Fade out #foo_1
$('#foo_1').fadeOut('slow');
}, 5000);
Just use standard jQuery function with parameter in ms FadeOut(500), FadeIn(500):
$(document).ready( function ()
{
$('#foo_1').fadeOut(1500);
$('#foo_2').text('No, I am!').fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='foo_1' style='display:block;'> I'm awesome </div>
<div id ='foo_2' style='display:none;'></div>