I am looking for a way to control the CSS for a specific item on hover. Since it's not an element directly in the parent lineage, I can't use CSS.
<article class="portfolio-item web">
<a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
<img src="http://localhost/wordpress/wp-content/themes/dewuske/images/portfolio/introspection.jpg" alt="">
<span class="genericBeaconIsotope">
<span class="beaconContainer">
<span class="beaconBar"></span>
<span class="beaconCircle1"></span>
<span class="beaconCircle2"></span>
<span class="beaconText">Introspection</span>
</span>
</span>
</a>
</article>
I'm trying to hover on beaconContainer and have the image be affected. It should function like a rollover. Here is what I'm trying to accomplish in CSS:
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
transition: all 1s ease-out 0s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 0s;
}
How would I go about doing this? I know very little JavaScript or jQuery or how to call events from them, especially like this. Thanks
JQuery provides several methods which may be helpful to you.
You could go about manually setting the CSS using the .css() method, or apply CSS classes dynamically to the elements (this is would be my preferred way) using the .addClass() and .removeClass() methods, reacting to user events such as mouse overs, etc.
NB: This is specifically a jQuery solution to the problem presented by your question.
In jQuery, you can use the addClass and removeClass functions. Keep all of the css in the css file, and then just change the class of each element.
http://api.jquery.com/addclass/
You need to create a CSS class with the styles you want to apply:
.rollover {
/* your styles here */
}
and a bit of jQuery that enabled your styles when mouse is over the beaconContainer:
$('article.portfolio-item.web').each(function(index, articleElem) {
var article = $(articleElem);
var image = article.find('img');
var container = article.find('.beaconContainer');
container.mouseover(function() { image.addClass("rollover"); });
container.mouseout(function() { image.removeClass("rollover"); });
});
It will also work if you have multiple articles on page.
You can create the CSS class and then add it to the container when you hover and then remove the class once you mouse out:
$('.beaconContainer img').hover(function(){
$( this ).addClass(cssClassName);
}, function() {
$( this ).removeClass(cssClassName);
}
);
Related
I'm trying to use this jQuery function on an animated button is not really working, can I get help with that? Below are the codes
HTML
<button class="btn-rounded">Button</butto>
CSS
.btn-rounded{
color: black;
opacidity:.7;
border-radius:150px;
background-color:#FFF067;
}
JS
$("#img").addClass("animated bounce");
Your js is not targeting the button at all, but rather an element #img. Besides it simply adds the classes to the element immediately on page load, irregardless of action.
To trigger the button animation on click, you'll need to create an event handler to apply the classes to the button when clicked.
$('button.btn-rounded').on('click', function(){
$(this).addClass('animated bounce');
});
You could just skip the jQuery and use plain ol' vanilla CSS.
.btn-rounded {
color: black;
opacity:.7;
border-radius:150px;
background-color:#FFF067;
transform: translateY(0);
transition: transform .5s cubic-bezier(0.5, -2.5, 0.5, 3.5);
}
.btn-rounded:hover {
transform: translateY(-25%);
}
Now, if you hover over it this bad boy will bounce for ya. Don't forget to fix the opacity typo in your CSS and the the button typo in you HTML.
I have some text I am animating in, and I do so using CSS keyframes. I keep the look of the end result of the animation, so I'm using animation-fill-mode: forwards to do so, like this:
#my-text {
opacity: 0;
}
.show-me {
animation-name: show-me;
animation-duration: 2s;
animation-fill-mode: forwards
}
#keyframes show-me {
100% {
opacity: 1;
}
}
I then add the show-me class to the element using jQuery:
$('#my-text').addClass('show-me');
Later, after the animation is complete, I try to change the opacity of the element through code, but an unable to do so:
// this won't change the opacity, unfortunately
$('#my-text').css('opacity', 0);
Here's an example that shows the issue: http://jsfiddle.net/x3mbkbwL/2/
How do I override the value set from the animation when using fill-mode forwards? I know I can remove the class (in this case "show-me") when I need to change the element's opacity, but it seems like I should be able to directly override the css in JavaScript and it would override the opacity.
Seems like CSS attributes set by animation-fill-mode: forwards can't be overwritten on the same element.
Either: Add a parent wrapper around
One solution is to put a wrapper around the element that has animation-fill-mode: forwards set. Then, in order to overwrite forwarded attributes, you would only update the parent instead.
<div id="parent">
<div id="my-text">I just faded in!</div>
</div>
Then "overwrite" opacity only on the parent:
$('#parent').css('opacity', 0);
I've implemented the changes to your fiddle here: http://jsfiddle.net/x3mbkbwL/3/
Or: Nest a wrapper inside
If you prefer, you could alternatively add another child element instead:
<div id="my-text">
<span id="wrapper">I just faded in!</span>
</div>
Then "overwrite" opacity only on the nested wrapper:
$('#wrapper').css('opacity', 0);
Both approaches work best if the forwarded opacity is set to 1. If it's forwarded to 0 then it obviously won't work as the element is then already hidden.
I'm customizing a theme for a client and trying to find a way to remove the dropdown functionality of the main navigation links. When you click on a top-level link, the menu closes (or opens). I'm not sure why they built this into the theme as I think it's very confusing to the user, not to mention doesn't work properly on mobile. I really need the menus to open on hover but not onclick.
I believe this is being done using a combination of CSS3 and Javascript (https://github.com/viljamis/responsive-nav.js). There's probably a simple solution by just editing the responsive-nav.js. But I'm not a javascript coder. Any help would be GREATLY appreciated.
The site is here: http://www.gatewayfitnesscenter.com
Code I believe controls this: http://gatewayfitnesscenter.com/wp-content/themes/westand/scripts/frontend/responsive-nav.js
In your theme's scripts/frontend/functions.js, locate this block of code (two lines after "//menu toggle"):
jQuery("#menus li.sub-icon > a") .click(function(){
jQuery(this).next().toggle(200);
return false;
});
That is the click handler so go ahead and remove it and you should be good!
OK, so it turns out this will be a fairly easy CSS tweak to get what you want. Open the style.css file for your "westland" theme. Now, search for .navigation ul li:hover > ul {. The first line after that is visibility: visible;. Either delete that line or comment it out and save the file. If you really want to avoid unnecessary work in the browser, delete/comment the entire block within. I've included the entire block below after commenting it out.
.navigation ul li:hover > ul {
/*
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
*/
}
That should prevent hovering over those menus from showing the sub-menu.
trying to animate a divs opacity when hovering some other element. First I tried it with display none/block, but it read somewhere it's impossible to make a transition for that.
This is a little complicated, because this is supposed to work on each element of the same type with a different id the same. (Picture gallery with a caption to appear on the bottom of the img element when the picture is hovered.)
The HTML structure is like this:
<article id="{PostID}">
<div class="post-content">
<a><img></a>
<div class="post-content--padded">
<p>Caption of the picture.</p>
</div>
</div>
</article>
First I went with a mouseover, mouseout approach added to the post-content div which looked like this:
onmouseover="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='1.0';" onmouseout="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='0.0';"
That worked, but there was no transition. I've set the CSS up with transition handlers to apply to all the css changes within post-content--padded like so:
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
This doesn't seem to affect the mouseover, mouseout opacity change I do, so I tried adding .animate() to that, without much success. Well I got post-content to fade in and out, but not post-content--padded
Different approach
That all didn't work so much. So I tried using the JQuery function hover().
Long story short I added this above the html in question:
<script type="text/javascript">
$(document).ready(function(){
$('#{PostID}.post-content').hover(
function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '1'}, 'slow');},
function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '0'}, 'slow');}
);
});
</script>
This just doesn't want to work though. Endless browsing of stackoverflow and other sources didn't seem to help me with this. Being stuck on this for over an hour I decided to simply ask. It cannot be that hard to add a hover > opactiy transition.
Hope I've not been clear and people understand my issue here.
you can do it just using css if you need only on hover
.post-content--padded{
opacity: 0;
-webkit-transition: all 2s;
-moz-transition: all 2s;
transition: all 2s;
}
.post-content:hover .post-content--padded{
opacity: 1;
-webkit-transition: all 2s;
-moz-transition: all 2s;
transition: all 2s;
}
see demo HERE
and if you want to use Jquery
$('.post-content--padded').hide();
$('.post-content').hover(function(){
$(this).find('.post-content--padded').fadeToggle(2000);
});
see demo HERE
I also worked on combining hover with animate and it worked like that:
in CSS opacity for "a" = 0
and in jQuery:
$("#classy").hover(function(){
$("#classy").animate({
opacity:"1"
},200);
}, function(){
$("#classy").animate({
opacity:"0"
},200);
});
Here is a jQuery method that works:
HTML
<div id='hover-me'>hover over me</div>
<div id='change-me'>I change opacity</div>
CSS
.hide {
opacity:0;
}
JS
$('#hover-me').hover( function() {
if ($('#change-me').hasClass('hide')) {
$('#change-me').removeClass('hide', 'slow');
} else {
$('#change-me').addClass('hide', 'slow');
}
});
jsFiddle Demo
*This is with jQueryUI included
I have this element that after executing a certain javascript function, will make its css transform value to :
-webkit-transform : translateX(25px) translateY(25px) scale(1);
how do i get that value through javascript in the form of
"translateX(25px) translateY(25px) scale(1)" ?
What I really want to achieve is that I want to add a "rotate(360deg)" on mouseenter. I'm thinking i'll be able to achieve this if I get hold to its current transform value.
the :hover pseudo-class wouldn't do the trick because it will be overwritten by the current value of -webkit-transform
EDIT:
I forgot to mention that this is actually for a plugin i'm doing. The translate values are being set through html data-attributes and being extracted through jQuery's .data().
If the values are fixed an not computed by the script, I think that a better choice is to keep of css form javascript, so instead of hardcoding the animation value in your script you could simply create a couple of css rules, e.g.
.transformed {
-webkit-transform: translateX(25px) translateY(25px) scale(1);
}
.transformed:hover {
-webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg);
}
After the first script execution, just add the .transformed class to your element.
Then you could leave the pseudoclass :hover work for you, without the need to use javascript for this task.
Otherwise if you need to mantain the 360deg rotation also on mouseleave, just change the last rule into
.transformed.mouseenter {
-webkit-transform: translateX(25px) translateY(25px) scale(1) rotate(360deg);
}
and on mouseenter event just add the .mouseenter class.
I'm not sure what the context of your problem is, but it sounds like you need to use a css3 transition library such as jQuery Transit since you are using Javascript heavily. Examples:
$(".box").on("mouseenter", function () {
$(".box").transition({x: '+=25', y: '+=25', scale: 1.5, rotate: 360 }, 500);
});
$(".box").on("mouseleave", function () {
$(".box").transition({x: '-=25', y: '-=25', scale: 1, rotate: 0 }, 500);
});
var scaleFactor = 0.25;
$(".boxGrow").on("click", function () {
$(".boxGrow").transition({scale: '+=' + scaleFactor }, 500);
});
JSFiddle Demo