Animate background-color on mouseenter event - javascript

I'm trying to have it so that when the mouse enters the .container elements the background-color of #facial element slowly transitions to white from blue.
I've read that you have to use jQuery's .animate() function to achieve this.
It doesn't seem to work. I've read on the forums you need something called JQuery UI, but those posts were older. I also do not see this option within my JsFiddle. Anybody know why this script is not working?
$(document).ready(function(){
$('.container').mouseenter(function(){
$('#facial').animate({backgroundColor:'#ffffff'},'slow');
});
});
JsFiddle Link

Try utilizing css :hover , existing transition property set to 8.5s
#test_box {
height: 50px;
width: 50px;
background: red;
transition: background 2s ease;
}
#test_box:hover {
background: green;
}
body {
background-color: #d6d6d6;
}
.container {
margin: 200px auto;
background-color: red;
width: 478px;
height: 200px;
}
#facial {
float: right;
width: 239px;
height: 200px;
background: #008aaf;
transition: background 8.5s ease;
}
#facial h1,
#facial h2 {
text-align: center;
margin-top: 30px;
color: #FFFFFF;
}
.container:hover > #facial {
background: #fff;
}
<div class="container">
<img src="http://s23.postimg.org/enn2yyh7v/Facial.jpg" />
<div id="facial">
<h1>Facial</h1>
<h2>Marketing Material</h2>
</div>
<div id="test_box">...</div>
</div>
jsfiddle http://jsfiddle.net/b008nczk/32/

Color animations need jQuery UI which extends the animate method.
https://jqueryui.com/animate/
In fact to animate the background-color with jquery you need the Color plugin.
https://github.com/jquery/jquery-color
Fiddle: https://jsfiddle.net/b008nczk/34/
$(document).ready(function () {
//1.1 On hover the background of #facial will turn white
$('.container').mouseenter(function () {
$('#facial').animate({
'background-color': '#ffffff'
}, 1000);
});
});
Also as a heads up when you include jQuery in jsfiddle it automatically includes jqueryui as well.

Got it working using CSS. The project started as an actual Jquery project, but ended up being completed with pure CSS. Thanks guys! Here are the results.
.container:hover > #facial {
background: #fff;
}
Results!

Related

Why is this not changing color after scrolling? CSS/Javascript

I am creating a header that, after scrolling, does a variety of things using CSS and Javascript. I must just be overlooking something that is preventing the underline on hover from changing from black to white after scrolling. It is supposed to always be the same color as the links.
Here's the link to see: http://www.exploreloudoncounty.com/
Any ideas? Thanks!
HTML:
<a class="nav__link" href="https://www.exploreloudoncounty.com/explore">Explore</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/join">Join</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/about">About</a>
<a class="nav__link" href="https://www.exploreloudoncounty.com/contact">Contact</a>
CSS:
.nav__link {
margin-right: 1em;
font-size: 1em;
color: #000;
text-decoration: none;
transition: 0.4s;
display: inline-block;
}
.nav__link::after {
content: '';
display: block;
width: 0;
height: 2px;
background-color: #000;
transition: width .3s;
}
.nav__link:hover::after {
width: 100%;
}
.nav__link.sticky a {
margin-right: 1em;
font-size: 1em;
color: #fff;
text-decoration: none;
transition: 0.4s;
display: inline-block;
}
.nav__link::after.sticky a {
content: '';
display: block;
width: 0;
height: 2px;
background: #fff;
background-color: #fff;
transition: width .3s;
}
.nav__link:hover::after.sticky a {
width: 100%;
}
JS:
if (scrollPosition > 100){
document.querySelector('.nav__link').classList.add('sticky');
}
else {
document.querySelector('.nav__link').classList.remove('sticky');
}
You should change your css to this:
.nav__link.sticky::after
This because the .sticky class is in the same element as .nav__link.
And if you want to use the a element in your styling you should put this at the front of the code, like this:
a.nav__link.sticky::after
This because the classes are located within this element so the element has to be in front.
What errors do you get if you open console (by pressing F12)?
Because if this is your complete JS, then you'll be getting scrollPosition is undefined.
The source you linked has this JS and you see they declare it at the beginning as:
let scrollPosition = Math.round(window.scrollY);
They also wrapped it in a lodash function called _.throttle, but you can acieve the same with setTimeout, it just makes sure the function gets called every now and then (here 300 milliseconds).
I would like to complement #Kjvhout answer.
That solution works only for the first link due to the wrong selector on the JS part.
In order to fix it, I would do the following:
Remove the JS altogether, if you inspect the dom, you can see that the header contains already a sticky class, so no need to add a new one to the anchors.
Rewrite the CSS to match this DOM structure, something like this should work:
.sticky .nav__link:after {
display: block;
width: 0;
height: 2px;
background: #fff;
background-color: rgb(255, 255, 255);
color: #fff;
background-color: #fff;
transition: width .3s;
}
This should solve the issue and would be a better solution as you can get rid of the unused JS part.
The reason why #Kjvhout answer was working only for the first is the JS part, your selector document.querySelector('.nav__link') is only selecting one HTMLElement, to get all the collection you should use document.querySelectorAll('.nav__link') and then iterate over this collection and apply the corresponding class.
But as I said earlier, my solution is simpler as you don't need to deal with JS.

How to make a bar which scrolls the text horizontally like this one in the news?

Hi I want to make a bar which scrolls the text like this one in the news.
I have a text which is too long for its maximal width and its overflow property is set to overflow-x: auto; so it's cutted. But I'm looking for such a bar which automatically scrolls my text (to the right) and when he finish, scrolls back in other direction (left). This is my text in css:
#text {
display: block;
color: white;
position: absolute;
width: 50%;
left: 0%;
text-align: center;
font-size: 8vw;
margin-top: 8.5%;
font-variant: small-caps;
text-shadow: 0 0 20px #000;
text-align: center;
z-index: 2;
overflow-x: auto;
white-space: nowrap;
line-height: 100%;
}
Any ideas? Actually answer can be in css, js or jquery. It doesn't matter.
The <maerquee>tag is obsolete as you can see here: https://developer.mozilla.org/de/docs/Web/HTML/Element/marquee
You can use pure css, here is a fiddle:
.marquee {
width: 450px;
background-color: yellow;
color: black;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
text-transform: uppercase;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
<div class="marquee">
<p>Lorem Ipsum</p>
</div>
Some of these CodePen examples may be useful to you or others:
http://codepen.io/search/pens?q=marquee&limit=all&type=type-pens
One I think may match most of what you are looking for is: http://codepen.io/jaredkc/pen/bmAph
It uses very simple jQuery to achieve the scrolling and on-hover pause
$('.twitter-scroll').marquee({
duration: 15000,
pauseOnHover: true
});
The only exception is that it doesn't 'bounce back' when i hits the left side.
as mentioned before there is the native marquee element:
<marquee scrollamount="2" behavior="alternate" direction="right" width="350">TEXT TO SCROLL</marquee>
& there is the jQuery Marquee plugin that can be configured to run the text infinitely without a gap. [example: https://codepen.io/aamirafridi/pen/qgutw ]
$('.marquee').marquee({
gap: 50,
duplicated: true
});
you can also use any carousel plugin to make use of a list & not a one line string. something as this one

Highlighting images on mouse enter

I have 4 images which will be thumbnails for news articles. When the user moves their mouse over one of the images I want it to highlight. I have done this by placing a div of the same size over the image. I then tried to use JQuery to add a class to that div on mouse enter which would make it a slightly see through blue box as shown here.
HTML:
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>
I know that in the JQuery I use .content as a reference to find the IDs of the news images faster. That does exist I just didn't copy in that far up the code because it would have resulted in a lot of code unrelated to my problem being pasted in.
CSS:
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-highlight
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
JQuery:
function highlightNews(newsDiv)
{
newsDiv.addClass('news-highlight');
}
function unhighlightNews(newsDiv)
{
newsDiv.removeClass('news-highlight');
}
$(document).ready(function()
{
var $content = $('.content');
var $news1 = $content.find('#news-1');
var $news2 = $content.find('#news-2');
var $news3 = $content.find('#news-3');
var $news4 = $content.find('#news-4');
function newsMouse(newsDiv)
{
newsDiv.on('mouseenter', highlightNews(newsDiv)).on('mouseleave', unhighlightNews(newsDiv));
}
newsMouse($news1);
newsMouse($news2);
newsMouse($news3);
newsMouse($news4);
});
Now you're probably crying after seeing my JQuery, I'm trying to learn it on the fly so I don't really know what I'm doing.
Thanks in advance :)
Why don't you make it with pure css without nothing of js?
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}
<div class="col-5 parent-center">
<div id="news1" class="news-highlight"></div>
<img src="images/news.jpg" class="news-image"/>
</div>
you can do this using pure CSS. basically highlighting is nothing but box-shadow or border on the hover.
.news-image:hover{
border:solid 1px red;
}
If you want to use JQuery to do something like this, one option is to use hover and toggleClass
$('.news-image img').hover(function() {
$(this).toggleClass('news-highlight');
});
.news-image {
float: left;
width: 33.3%;
padding: 5px;
box-sizing: border-box;
}
.news-image img{
transition: all 0.3s ease-in;
width: 100%;
}
.news-highlight {
opacity: 0.6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
<div class="news-image">
<img src="http://placehold.it/350x150">
</div>
If I understand what you want correctly, you should just need to change the colour of the div on top of your images when they are hovered on. This can easily be done with CSS. This should work:
.news-highlight
{
background: rgba(51, 153, 255, 0);
}
.news-highlight:hover
{
background: rgba(51, 153, 255, 0.5);
}
This will give the div a semi-transparent blue colour when the user hovers the cursor over it, and the image will show through.
You could also change the images to a greyscale at the same time, which may improve the effect.
EDIT: I should have also stated that you need to change the order of your html to this:
<div class="col-5 parent-center">
<img src="images/news.jpg" class="news-image"/>
<div id="news1" class="news-highlight"></div>
</div>
now the .news-highlight div will appear on top of your img.
Here is jsFiddle how does hover effect work. Practice is the answer! jQuery not required for something this simple
.news-image
{
height: 100%;
width: 90%;
border: solid 2px #14a0dc;
}
.news-image:hover
{
height: 100%;
width: 90%;
position: absolute;
background-color: #14a0dc;
opacity: 0.6;
}

jquery hide div with CSS transition effect

I have one question about CSS hide transition using jquery hide function.
I have created this DEMO from codepen.io
In this demo you can see the show button. When you click the show button then .test and .user-image div opening with CSS transition effect .
I want to make it when clicked hide button then the .test div hide with CSS transition effect.
Anyone can tell me a little example how can i do that ?
CSS
<div class="container">
<div class="usr">Show</div>
<div class="test">
<div class="hide">Hide</div>
<div class="user-image" style="background-image:url(...);"></div>
</div>
</div>
JS
$(document).ready(function() {
$('.usr').click(function() {
$(".test").show();
});
$(".hide").click(function() {
$(".test").hide();
});
});
You don't need jQuery for this at all. Check this example:
http://codepen.io/anon/pen/JdKWWW
.hide-show-element {
background-color: #eee;
height: 400px;
position: relative;
text-align: center;
width: 400px;
}
.hide-show-element input[type='checkbox'] {
display: none;
}
.hide-show-element label {
background-color: #a00;
border: 1px solid #111;
color: #fff;
display: block;
text-align: center;
transition-duration: 0.4s;
}
.hide-show-element label:after {
display: block;
content: "Show";
}
.hide-show-element input:checked + label {
background-color: #fff;
border: 1px solid #a00;
color: #a00;
}
.hide-show-element input:checked + label:after {
content: "Hide";
}
.test1 {
opacity: 0;
position: relative;
height: 0;
top: 20%;
transition-duration: 0.4s;
width: 0;
}
.hide-show-element input:checked ~ .test1 {
opacity: 1;
height: 200px;
width: 200px;
}
<div class="hide-show-element">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
<img class="test1" src="http://lorempixel.com/200/200" />
</div>
$('#id-of-your-div').fadeOut(); //fade out
$('#id-of-your-div').fadeIn(); //fade in div
check documentation for more info.
If you insist on using jQuery, that's very easy to achieve as well. Define the styles to transition to when showing in a separate css class .show. Add transition-duration: 0.5s; to .test.
Then
$(document).ready(function() {
$('.showHideToggle').click(function() {
var toggle= $(this);
if ($(".test").hasClass("show")) {
toggle.text("Hide");
$(".test").removeClass("show");
}
else {
toggle.text("Show");
$(".test").addClass("show");
}
});
});
Assuming you are actually talking about literal css transitions, toggle a class on and off. If you want it to fade out then display none, you'll need to use a timeout of the length of your animation that sets to display none at the end. There's no way to keyframe with transitions.
$(document).ready(function() {
$('.usr').click(function() {
$(".test").css('display','block').removeClass('hidden');
});
$(".hide").click(function() {
$(".test").addClass('hidden');
setTimeout(function(){
$(".test").css('display','none')}, 500 //Animation Time
)
});
});
--
.test{
opacity:1;
transition:500ms cubic-bezier(0,0,0.58,1);
-webkit-transition:500ms cubic-bezier(0,0,0.58,1);
}
.hidden{
opacity:0;
}

Can I use jquery to on image hover fade on load text to new text dependent on each image

I have 6 images that when hovered on I would like there corresponding text to fadeIn in the same position one overtaking the other on each image hover.
I am able to show/hide on hover but I am unable to get each element to remove when a new image is hovered.
I have been working on a fiddle here http://jsfiddle.net/PvVg9/
I am new to jquery and the help would really be appreciated.
$('.trigger').hover(function() {
$('.hide').fadeOut(function() {
$('.panel').fadeIn();
});
});
$('.trigger-two').hover(function() {
$('.hide').fadeOut(function() {
$('.panel-two').fadeIn();
});
});
No need for jQuery if you are happy to use CSS3:
JSFIDDLE
HTML
<div class="trigger">Image 1<div class="panel">SHOW ME 1</div></div>
<div class="trigger">Image 2<div class="panel">SHOW ME 2</div></div>
<div class="trigger">Image 3<div class="panel">SHOW ME 3</div></div>
<div class="trigger">Image 4<div class="panel">SHOW ME 4</div></div>
<div class="trigger">Image 5<div class="panel">SHOW ME 5</div></div>
<div class="trigger">Image 6<div class="panel">SHOW ME 6</div></div>
CSS
.panel,
.trigger {
width: 100px;
height: 20px;
margin: 2px;
}
.trigger {
position: relative;
background: grey;
border: 1px solid black;
}
.panel {
position: absolute;
left: 100%;
top: -3px;
background-color: red;
border: 1px solid darkred;
visibility:hidden;
opacity: 0;
transition: visibility 0.1s linear 0.5s,opacity 0.5s linear;
}
.trigger:hover .panel {
visibility:visible;
opacity:1;
transition-delay:0s;
}
Or if you want them one on top of the other then: JSFIDDLE
I do not understand what you want, I guess a tooltip JQuery plug may fit your need.
Check this tool.
I also update your example, you can have a look at it jsfiddle.net/PvVg9/154/

Categories