We Keep Coding

Slidingbar .js animation not smooth

I just built a sliding top panel for a website which is running on wordpress. Therefore I've added the bar into the header by using a hook point. I use a very simple custom.js (mostly copied together from different sources), so that the bar will "slide down" (=appear) on first click and "slide up" (=disappear) on the second click. For some reasons, this animation is not running smoothly. While it is a little bit too fast (which I could easily change by increasing the speed duration), the animations also seems to be laggy. I bet, I oversee something important, cause I am not used to jQuery/Javascript. Exists there some of code snippets to make the transition more smoothly?
Java-Script Markup:
// Slidingbar initialization
var tgslidingbar_state = 0;
// Clicking
jQuery( '.tg-toggle-wrapper' ).click( function(){
var $tgslidingbar = jQuery ( this ).parents( '#tgslidingbar-area').children( '#tgslidingbar' );
//Expand
if ( tgslidingbar_state === 0 ) {
$tgslidingbar.slideDown( 340, 'easeOutQuad' );
jQuery( '.tg-toggle-wrapper' ).addClass( 'open' );
tgslidingbar_state = 1;
//Collapse
} else if( tgslidingbar_state == 1 ) {
$tgslidingbar.slideUp(340,'easeOutQuad');
jQuery( '.tg-toggle-wrapper' ).removeClass( 'open' );
tgslidingbar_state = 0;
}
});
HTML-Markup:
<div id="tgslidingbar-area" class="tgslidingbar-area">
<div style="display: none;" id="tgslidingbar">
<div class="containertop">
Slidingbar Content Here!
</div></div>
<div class="tg-toggle-wrapper"><a class="tg-toggle" href="#"></a>
</div></div>
With this markup the sliding bar does slide down and up. For example, I've added a google maps into the sliding bar, when I've noticed that the bar is laggy. Could this be a reason for the laggy animations, too, cause google maps just loads when the bar opens? I also realized the "easeOutQuad" property in the copied snippet animations and searched for this on the web. It seems to be a popular jQuery library for animations. Up to now I do not have included this library into my websites, maybe thats the cause?
Kind Regards from Germany!

I applied some modification on the code.
I use query’s animate function.
A initial display property of #tgslidingbar was changed to ‘block’
added ‘padding’ on container top class and removed ‘padding’ on tgslidingbar class.
https://jsfiddle.net/nigayo/cn49ubr6/
[html]
<div style="display:block;height:0" id="tgslidingbar">
[JS]
var tgslidingbar_state = 0;
var $tgslidingbar = jQuery('#tgslidingbar');
var nHeight = $tgslidingbar.get(0).scrollHeight;
// Handle the slidingbar toggle click
jQuery('.tg-toggle-wrapper').click(function() {
//Expand
if (tgslidingbar_state === 0) {
$tgslidingbar.animate({
'height': nHeight
}, 340, function() {
jQuery('.tg-toggle-wrapper').addClass('open');
tgslidingbar_state = 1;
});
......

I suggest some different options.
first,
Instead, use jquery's animate function.
http://api.jquery.com/animate/
sample code : https://jsfiddle.net/nigayo/jo5vd2ob/
second.
you can use css transition.
http://jsfiddle.net/nigayo/qy1ummx6/1/
[css]
.box {
float: left;
/* you can use other ease effect. ease-in, ease-out, ease-in-out */
-webkit-transition: all 1s ease;
overflow: hidden;
}
.height {
background-color: red;
width: 300px;
max-height: 0px;
}
.change {
max-height: 500px;
}
[JS]
$('button').on('click', function() {
$('.box').toggleClass('change');
});

Hover(), mouseenter(), mouseover(), etc jumping back and forth

I am trying to make a situation when you hover over an image then it will hide an image and show another. and the other way around when you hover out.
I have tried using all the various hover effects that comes to mind like mouseenter, mouseover, hover, etc.
They all cause the same problem. If i very firmly and quickly drag my cursor into the field of action then it will give me the desired effect. however if i slowly drag my cursor into the field of action then it will jump between the images a couple of times before finally stopping at the correct image.
this looks very unprofessional and i want it to be much more consequent doing this action so that no matter if i do it slow or fast then it will only jump once.
this is my script:
$("#DenmarkMap").hide();
$("#InfoBadge1").hover(function(){
$("#InfoLogo").hide("puff");
$("#DenmarkMap").show("puff");
}, function(){
$("#DenmarkMap").hide("puff");
$("#InfoLogo").show("puff");
});
this is a non working fiddle
https://jsfiddle.net/ydeLvxx2/
hope you guys can help me figure this out.

Here is a pure Javascript solution (no jQuery needed)
https://jsfiddle.net/uL0hpxbu/
Update: version with CSS3 "puff" effect: https://jsfiddle.net/230ta4tk/2/
Here is how the main script looks like:
var InfoBadge1 = document.getElementById("InfoBadge1");
var InfoLogo = document.getElementById("InfoLogo");
var DenmarkMap = document.getElementById("DenmarkMap");
InfoBadge1.addEventListener("mouseover", function() {
InfoLogo.classList.toggle("puff");
DenmarkMap.classList.toggle("puff");
});
InfoBadge1.addEventListener("mouseout", function() {
InfoLogo.classList.toggle("puff");
DenmarkMap.classList.toggle("puff");
});
and CSS part (just an example, change it as you want)
#DenmarkMap {
position: absolute;
left: 0;
top: 0;
transition: .5s all;
}
#InfoLogo {
position: absolute;
left: 250px;
top: 120px;
transition: .5s all;
}
#InfoBadge1 {
position: absolute;
left: 0px;
top: 120px;
}
.puff {
transform: scale(1.2);
opacity: 0;
}
and HTML:
<img id="InfoBadge1" src="http://dummyimage.com/200x100/803580/ffffff&text=InfoBadge1" alt="" />
<img id="InfoLogo" src="http://dummyimage.com/200x100/803580/ffffff&text=InfoLogo" alt="" />
<img id="DenmarkMap" class="puff" src="http://dummyimage.com/200x100/3c8036/ffffff&text=DenmarkMap" alt="" />

You should not bind your hover's mouseleave/mouseout event to the same image, because you've just hidden it.
Instead, consider binding the hover functions to the parent DOM node (a DIV for example):
<div id="images">
<img id="InfoBadge1" src="./Photos/DenmarkInfoBadge.png">
<img id="InfoLogo" src="./Photos/InfoLogo.png">
<img id="DenmarkMap" src="./Photos/DenmarkMap.png">
</div>
Your javascript can then become:
$("#DenmarkMap").hide();
$("#images").hover(function(){
$("#InfoLogo").hide("puff");
$("#DenmarkMap").show("puff");
}, function(){
$("#DenmarkMap").hide("puff");
$("#InfoLogo").show("puff");
});

.toggle() on figcaption not working

I made my caption overlay my image and I wanted to add a display on hover functionality to it. But I can't get it to work
CSS
figure
{
margin: 0;
position: relative;
float: left;
figcaption
{
z-index: 2;
background-color: #ccc;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
}
HTML
<figure>
<img src = "http://someimage.com/image.png">
<figcaption id="caption" style = "display: none">
<p> Some caption text </p>
<a href = '#'>link to author's bio</a>
</figcaption>
</figure>
And finally my very simplistic javascript. I know the hover functionality is working correctly because my console has a "hello" when I enter the figure and a "goodbye" when I leave. There is no "complete" message.
JQUERY
<script type = "text/javascript">
$('figure').hover(function ()
{
console.log('hello');
$('figcaption').toggle(slow,function(){ console.log("complete");} );
},
function ()
{
console.log('goodbye');
$('figcaption').toggle(slow,function(){ console.log("complete");});
});
</script>

Put slow in quotation marks since it's a string and it will work:
$('figcaption').toggle("slow",function(){ console.log("complete");} );
Fiddle

You should have an error in the console. Change slow to "slow".
It's a string.
From the documentation :
duration (default: 400) Type: Number or String A string or number
determining how long the animation will run.

You have multiple errors on your page
Check out the fiddle for a working demo
slow should be "slow"
you did not close the image tag
you have one css class nested inside the other
For future reference. Browsers have JavaScript consoles that print debug information. You must know this as you are using console.log(). If your current browser does not print information like:
Uncaught ReferenceError: slow is not defined
I would recommend you tweak your console settings or install a thrird party one. There are many excellent choices out there

Slow is a string:
$('figure').hover(
function(){
console.log('hello');
$('figcaption').toggle("slow",function(){ console.log("complete");} );
},function(){
console.log('goodbye');
$('figcaption').toggle("slow",function(){ console.log("complete");});
});
http://jsfiddle.net/RX5QA/1/

On mouseover, changing an image's opacity and overlaying text

I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.
Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.
Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.
The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?

Wrap your image in a <div class="thumb">
Add position: relative to .thumb.
Add <div class="text> inside .thumb.
Add display: none; position: absolute; bottom: 0 to .text.
Use .thumb:hover .text { display: block } to make the text visible on hover.
Like this: http://jsfiddle.net/dYxYs/
You could enhance this with some JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
This way, the basic effect still works without JavaScript, and users with JavaScript get the appealing fade effect.

Go with option 2. There are ways to do it to not have to write a jQuery function for each image. As seen in my jsfiddle.
http://jsfiddle.net/daybreaker/dfJHZ/
HTML
<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
jQuery
$('img').mouseover(function(){
$(this).css('opacity','.2');
$(this).next('span.text').show();
}).mouseout(function(){
$(this).css('opacity','1');
$(this).next('span.text').hide();
});
You would need to modify the span.text css to overlay it on top of the image, but that shouldnt be too bad.

Wrap it in an element and do something like this:
var t;
$('div.imgwrap img').hover(function(){
t = $('<div />').text($(this).attr('title')).appendTo($(this).parent());
$(this).fadeTo('fast',0.5);
},function(){
$(this).fadeTo('fast',1);
$(t).remove();
});
with a markup similar to:
<div class="imgwrap">
<img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>
example: http://jsfiddle.net/niklasvh/Wtr9W/

Here's an example. You can position the text however you want, but the basic principle below.
http://jsfiddle.net/Xrvha/
#container { position: relative; }
#container img, #container div {
position: absolute;
width: 128px;
height: 128px;
}
#container img { z-index -1; }
#container div {
z-index 1;
line-height: 128px;
opacity: 0;
text-align: center;
}
#container:hover img {
opacity: 0.35;
}
#container:hover div {
opacity: 1;
}

If you don't want to change your HTML wraping things etc, I suggest you this way. Here is the jQuery:
$(function() {
$(".thumb").mouseenter(function() {
var $t = $(this);
var $d = $("<div>");
$d.addClass("desc").text($t.attr("alt")).css({
width: $t.width(),
height: $t.height() - 20,
top: $t.position().top
});
$t.after($d).fadeTo("fast", 0.3);
$d.mouseleave(function() {
$(this).fadeOut("fast", 0, function() {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.0);
});
});
});

2 is a good solution, have done about the same as this and it isn't as hard as you would've tought;
Drop de opacity with css indeed, than position a div relative to the img, and over it. It can be done with plain css. The z-index is the trick. That div can just be shown with $('#div').slideUp() ie.

How to enlarge image while hover over an image?

I want to show the thumbnail image large when hover over it, similar to the one in
http://www.freelayouts.com/websites/html-templates Plz help. Any help will be appreciated.

What you need is a tooltip plugin. There are plenty of them.
Check out this list: https://cssauthor.com/jquery-css3-hover-effects/

<img class="enlarge-onhover" src="img.jpg">
...
And on the css:
.enlarge-onhover {
width: 30px;
height: 30px;
}
.enlarge-onhover:hover {
width: 70px;
height: 70px;
}

Take a look at http://fancybox.net/blog
Fancybox looks nice, uses JQuery and is highly configurable with various show/hide effects. Tutorial number 3 on this page shows you how to use it OnHover rather than OnClick
The home page http://fancybox.net/home shows some examples of the visual effect

<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
The function bigImg() is triggered when the user mouse over the image. This function enlarges the image.
The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.