I'm having real problem with a hoverIntent.
http://jsfiddle.net/5fwqL/
What I want:
When hovering over the text for about 500ms I want the deletetext to show.
If I press the deletebutton i want the text to be deleted
If I go out of the text without pressing deletetext I want it to hide()
javascript
$(document).on({
mouseenter: function () {
mouse_is_inside = true;
$(this).next().slideDown();
},
mouseleave: function () {
mouse_is_inside = false;
$(this).next().hide();
}
}, '.title');
$('.deleteLink').on('click', function() {
$(this).prev().remove();
});
html
<div>
<div class='title'>TitleText</div>
<div class='delete'><a class='deleteLink' href="#">delete...</a></div>
</div>
** Forgot to mention that It has to work in IE8, so I have to use old style! **
Have a look at this fiddle
http://jsfiddle.net/joevallender/42Tw8/
You can use CSS to handle showing and hiding the delete link. Say you nested your HTML like this
<div class='title'>
TitleText 1
<a class='delete' href="#">delete...</a>
</div>
Then you can use CSS like this
.delete{
color: red;
display: none;
}
.title:hover .delete {
display:block
}
It's quite a common pattern for things like delete/edit links actually. The .title:hover .delete means the CSS the .delete will have when a parent .title is being hovered on. You could have also added an arbitrary class to your parent in your example and used that if you wanted to keep the same HTML arrangement.
Then use the JS below to handle the click
$(document).ready(function(){
$('.delete').click(function(){
$(this).parent().remove();
return false;
});
});
Does that make sense? It's slightly differently arranged to your starting point
EDIT
For the fade in/out I mentioned in the comment, you could use something like this
.delete{
color: red;
opacity:0;
transition:opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-webkit-transition: opacity 0.5s linear;
}
.title:hover .delete {
opacity: 1;
transition:opacity 2s linear;
-moz-transition: opacity 2s linear;
-webkit-transition: opacity 2s linear;
}
EDIT2
Changed the above code to use different transition times for fade in and fade out
$(document).ready(function() {
$(".title").hover(
function() {
$(this).data("mouse_hover", true);
var self = $(this);
setTimeout(function() {
if (self.data("mouse_hover") === true) {
self.next(".deleteLink").show();
}
}, 500);
},
function() {
$(this).data("mouse_hover", false).next(".delete").hide();
}
);
$(".deleteLink").click(function(e) {
e.preventDefault();
$(this).text("deleted").prev(".title").slideUp(function() {
$(this).hide();
});
});
});
Related
I have this page with menu-link (#navBtn), and #mobileLinks div that opens and closes when clicking #navBtn.
I would like to add fade-in animation when #mobileLinks div is opened, and fade-out animation when the #mobileLinks div is closed. I would like to achieve this with pure JavaScript.
I managed to insert the fade-in animation already, but don't know how to add the fade-out animation as well.
var content = document.getElementById("mobileLinks");
var button = document.getElementById("navBtn");
button.onclick = function(){
if(content.className == "open"){
content.className = "";
content.animate([{opacity:'0.0'}, {opacity:'1.0'}],
{duration: 1500, fill:'forwards'})
} else{
content.className = "open";
}
};
#navBtn
#mobileLinks {
display: none
}
#mobileLinks.open {
display: flex;
}
You can handle the styles entirely in CSS, and only toggle a class with Js.
With CSS & Js
const menu = document.getElementById("menu")
function toggleMenu() {
menu.classList.toggle("isOpen");
}
#menu {
opacity: 0;
transition: opacity 0.2s ease-out;
}
#menu.isOpen {
opacity: 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>
Or with JS only
const menu = document.getElementById("menu")
menu.style.opacity = '0'
menu.style.transition = "opacity 0.2s ease-out"
function toggleMenu() {
// Toggle between 0 and 1
menu.style.opacity ^= 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>
You can achieve it using jquery effect
To show your element, use fadeIn() and to hide an element, you can use fadeOut()
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeOut();
$("#div3").fadeToggle();
});
});
</script>
You can do it with JS. You can change the opacity of the element to hide it and along with css transition property to make fade effect
var container = document.getElementById("container")
function clicked() {
if (container.style.opacity == 0) {
container.style.opacity = 1
}
else {
container.style.opacity = 0
}
}
#container {
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div id="container">Some Text</div>
Submit
So I found this solution Using CSS for fade-in effect on page load And I've used Method 2 with raw JavaScript. Here's my code sample
JavaScript
var fadeOnLoad = function () {
document.getElementById("wrapper").className += "load";
};
fadeOnLoad();
CSS
#wrapper {
opacity: 0;
transition: opacity 2s ease-in;
}
.load {
opacity: 1;
}
Link to the website where it doesn't work https://skidle.github.io/projects/weather
And this text is crossed out in Google Dev tools
try to define
opacity: 1 !important;
id selector has higher priority than class
Here is a snippet with clear process logic. Element is invisible until body got loaded. As soon as event body onload fired, element gets opacity: 1;
function fadeOnLoad() {
document.getElementById("wrapper").className = "";
};
#wrapper {
transition: opacity 2s ease-in;
}
.not_loaded {
opacity: 0;
}
<body onload="fadeOnLoad()">
<div id="wrapper" class="not_loaded">text</div>
</body>
Add important to your class attribute.
.load{
opcacity: 1 !important; //because you have id selector with opacity to 0.
}
As a good practice, try to avoid using IDs for styling.
Instead of defining the transition in the #wrapper selector, create a class containing the transition property like so:
.opacity-transition {
transition: opacity 2s ease-in;
}
Once the transition ends, this class will not be needed any more and can be removed.
Create another class to initially hide the #wrapper element. When this class is removed it will trigger the transition.
.hidden {
opacity: 0;
}
Code Snippet:
function fadeOnLoad() {
//Cache the selector.
var wrapper = document.getElementById("wrapper");
console.log(wrapper.className);
//Add event listener for transition end.
wrapper.addEventListener("transitionend", function() {
//Remove the class which is not needed anymore.
this.classList.remove("opacity-transition");
console.log(this.className);
});
//Remove hidden class to start the transition.
wrapper.classList.remove("hidden");
};
.opacity-transition {
transition: opacity 2s ease-in;
}
.hidden {
opacity: 0;
}
<body onload="fadeOnLoad()">
<div id="wrapper" class="opacity-transition hidden">
text</div>
</body>
JSFIDDLE
When a user comes to a website via www.example.com/#div4, I would like the division specified in the URL to be highlighted with #F37736 (orange) and then within 2 seconds transition smoothly back to #00A087 (the default color).
The div to be highlighted as a class of "fixed-nav-bar".
What I've tried:
var hash = false;
checkHash();
function checkHash(){
if(window.location.hash != hash) {
hash = window.location.hash;
} t=setTimeout("checkHash()",400);
};
You could look for the hash, then target the division by it's class name. You'll immediately change the color of the div to your orange color, then animate it back to your default color.
You will need to include the jQuery Color library to animate the background-color though, as vanilla jQuery cannot animate background-color. You can also use jQuery UI's highlight effect, thought the UI library is a little heavier in size.
$(document).ready(function () {
var hash = window.location.hash;
$('.' + hash).css('background-color', '#F37736').animate({
backgroundColor: '#00A087'
}, 2000);
});
This can be solved with just CSS using the :target pseudo-class. It allows you to highlight the item that has an ID matching the hash in your URL. A very simple example of this would be:
div {
background-color: #00A087;
}
div:target {
background-color: #F37736;
}
By default, a div would have a default colour but on finding a match it would switch to something different. To make it work in the way you specified, just sprinkle a bit of animation magic:
div {
background-color: #00A087;
}
div:target {
background-color: #F37736;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-duration: 4s;
animation-name: highlight;
animation-timing-function: ease-in-out;
}
#keyframes highlight {
from {
background-color: #F37736;
}
to {
background-color: #00A087;
}
}
Here I've set the animation to delay for 2 seconds and to maintain the final state of the animation.
With the various properties available you can mix and match to make it work a little differently but this would achieve what was being asked in the question.
Example on CodePen
I'm assuming that, you wanna highlight the background color on some events.
Try adding this css to your code. This will highlight background color on hover.
.fixed-nav-bar {
background-color: #f37736;
}
.fixed-nav-bar:hover {
background-color: #00a087;
-webkit-transition: background-color 2000ms linear;
-moz-transition: background-color 2000ms linear;
-o-transition: background-color 2000ms linear;
-ms-transition: background-color 2000ms linear;
transition: background-color 2000ms linear;
}
Hope this will help you.
I have two div elements "trigger" and "target". I was looking for a mechanism where every time "trigger" is clicked, a script animates the height of "target". However I need it to toggle between 0px and 100px. After some research I found this
On searching a little I found the following script
$("#trigger").toggle(function(){
$("#target").animate({height:40},200);
},function(){
$("#target").animate({height:10},200);
});
However it didnt seem to work.. after some more searching I came across the following script
$(document).ready(function()
{$("#trigger").click(function()
{
$('#target').toggle(
function()
{
$('#target').animate({height: "250"}, 1500);
},
function()
{
$('#target').animate({height: "0"}, 1500);
});
});
});
and this didn't work either. The element does animate but along with the height, the width and opacity would also animate. Further research brought me to this effect. So basically there are two toggle(). in jquery, and i'm confused about how each is used. All I want to do is animate the height of one element with a toggle when another element is clicked. I hope I have been clear enough.
You could just add a variable like var trigger = false;
var trigger = false;
$("#trigger").click(function(){
if(!trigger) {
$("#target").animate({height:40},200);
trigger = true;
}
else {
$("#target").animate({height:10},200);
trigger = false;
}
});
You could use toggleClass instead:
$("#trigger").click(function() {
$(".target").toggleClass("higher");
});
in your css you then use:
.target {
height:50px;
background-color:#f00;
-webkit-transition: height 1s;
-moz-transition: height 1s;
-ms-transition: height 1s;
-o-transition: height 1s;
transition: height 1s;
}
.higher {
height:100px;
}
http://jsfiddle.net/JSfa3/
I have a div filled with info at this blog and I have it set at a certain opacity using CSS. How would I have it "fade in" using jQuery to 90 or 100% on hover of that div?
.infoHolder2 {
position:absolute;
color:#FFF;
background:#9f9377;
padding:15px;
padding-top:23px;
z-index:5;
width:97.7%;
bottom:8px;
margin:-8px;
opacity:0.2;filter:alpha(opacity=20)
}
<div class="infoHolder2"><div id="title">I'm {Title} and I like <span id="stuff"></span>.
</div><img id="portrait" src="{PortraitURL-128}"><img id="portraitCover"
src="http://static.tumblr.com/ux4v5bf/3Uolhxkyl/cover.png">
<div id="infoHolder">{Description}</div></div>
Try jquery fadeto().
This should do the trick (fade to 90% in 500 ms):
$(".infoHolder2").fadeTo(500, 0.9);
I think that the following should work:
$('.infoHolder2').fadeTo(500,'1');
It's worth noting the order of the arguments in the fade() method, duration is first, followed by the value of the desired opacity. For some reason I always get them mixed up when writing them down. Thanks #alex for the comment.
You could, also, if you wanted to, use:
$('.infoHolder2').animate({'opacity':'1'},500);
But, unless you're animating other properties, it becomes a little less concise for the same effect.
JS Fiddle demo to cover both options.
References:
fadeTo(),
animate().
Edited in response to OP's requirements to run this on hover()
$('ul li').hover(
function(){
var which = $(this).index();
if (which == 0){
$(this).fadeTo(500,'1');
}
else {
$(this).animate({'opacity':'1'},500);
}
},
function(){
$(this).fadeTo(500, 0.5);
}
);
JS Fiddle demo.
Use jQueries fadeTo
Usage
http://api.jquery.com/fadeTo/
fadeTo(duration, opacity)
Example
//90% Opacity
$('.infoHolder2').fadeTo("slow", 0.90);
//100% Opacity
$('.infoHolder2').fadeTo("slow", 1);
On Hover
$('.infoHolder2').hover(
function(){
$(this).fadeTo('slow', 0.90);
},function(){
$(this).fadeTo('slow', 0.50);
}
);
Live Demo
You can use fadeTo().
To fade to 90% opacity, use this...
$('.infoHolder2').hover(function() {
$(this).fadeTo(1000, 0.9);
}, function() {
$(this).fadeTo(1000, 0);
});
jsFiddle.
also by CSS3 without using jquery
.image {
position: relative;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity:1;
filter:alpha(opacity=100);
}
.image:hover {
opacity:0;
filter:alpha(opacity=0);
}