Currently, I am utilizing a:after, and it includes right: Ypx.
I am interested in employing the animate method within jQuery to transition the element (a:after) from Ypx to Zpx. Is there a way to achieve this?
Here is an example:
[link-text][after]
[link-text]-- moving > --[after]
While I am able to change the position without animation by using a:hover:after { right: Zpx }, how can I accomplish this with animation effects?
Your approach seems quite unconventional, and I would strongly advise you to create actual elements instead of attempting to animate pseudo-elements. However, for future reference: the only way to animate a pseudo-element is by adding a style tag and modifying the value in real CSS, like so...
var styles = document.getElementById("pseudo-mover")
var distance = 100;
var move = function(){
styles.innerHTML = ".box:after {left: " + distance + "px}";
distance++;
if (distance < 200)
setTimeout(move, 30);
}
move()
This code snippet uses vanilla JavaScript, but you could also utilize jquery's step callback within its animate function to leverage jquery's easing and timing functions.
To achieve this effect, you can utilize CSS3 transitions; however, at the moment, they are only compatible with FireFox 4 and above.
Check out this demo on jsfiddle
#foo:after{
content:'!';
display:inline-block;
border:solid 1px #f00;
padding:3px;
width:25px;
text-align:center;
-webkit-transition:margin-left 1s;
-moz-transition:margin-left 1s;
-ms-transition:margin-left 1s;
-o-transition:margin-left 1s;
transition:margin-left 1s;
}
#foo:hover:after{
margin-left:100px;
}
Instead of the current method, try using next(). See this demonstration for detailed instructions.
Occasionally, I encounter a scenario where objects need to be pushed into a separate array based on the content of a looped array: let customArray: any[]; _.forEach(iteratedArray, (item:any) => { // some irrelevant code... customArray.push(item ...
In search of a 'sticky' directive that can trigger the addition of a css class to an element when it reaches the top of a page and also notify the changes in its state, I have declared a scope like { onStickyChange: '&' }. My goal i ...
I am looking to add information retrieved from the iTunes API to the end of a table. The first album I receive will be placed at the very end, with each subsequent album adding on while pushing the previous one up in the hierarchy. Any ideas on how I can ...
After the User leaves the Discord, I attempted to create a RichEmbed Message that would include a random GIF from Giphy. The GIF was meant to be generated using the getGiphyPic() function with the help of this node module: https://github.com/risan/giphy-ra ...
Looking to scrape a website for French results, but the site supports multiple languages. How can I achieve this? Is it best to configure Puppeteer Crawler launch options using args, like so: const pptr = require("puppeteer"); (async () => { const b ...
In the context of a work project, there is a bookmark page with internal links already set up. However, I am looking to allow users to add custom bookmarks with their own URLs dynamically and save them via local storage. This could potentially include an i ...
I am a beginner in the world of PHP and JavaScript (Ajax) and despite my efforts to find a solution by looking at various posts and websites, I have not been successful. My goal is to display all related database rows on the front end of a website. While ...
Encountering an issue while attempting to add a new object to the attachments parameter. Despite successfully pushing the object into the array in the success function of dropzone, it does not reflect in the ng-repeat within template.html. If you observe ...
I am trying to add a simple tooltip to an SVG "map" when the mouse hovers over a rectangle. To create the tooltip, I would like to utilize this specific plugin. Here is how I have connected the SVG to HTML: <object data="map.svg" type="image/svg+xml" ...
Important Note: While similar questions have been asked before, it's important to consider that the mobile web is constantly evolving. The discussions from a few years ago may no longer be relevant due to updates and changes in technology. I am curre ...
I am currently working on a SSR React App using Webpack3 and Babel6. However, when I launch the server, it is not able to locate any css file (Error: Cannot find module './file.css'). Here is an overview of my current folder structure: src/ | ...
What is the best way to vertically center a button within a div? Click here for an image of the issue I recently started learning HTML & CSS and I am struggling to align a button in the vertical center of a div. Text-align:center doesn't seem to be ...
Having trouble locating the element for "Sign out" button in Selenium. I've tried using the following CSS identifier: css= div[class='sub-nav chat-bubble']>ul>div:nth-child(3)>li:nth-child(4)>a Could someone please help me modi ...
Could anyone provide some assistance or guidance on how to solve a small issue I'm facing? I would like the text in my navigation to change depending on my position on the site (position1, position2 etc.) Here is a fiddle link for reference: http:// ...
After creating a small website using Bootstrap 4.3.1, I realized that the only JavaScript required is for the collapse plugin in the responsive navbar with a toggler button. Unfortunately, since there is no longer a customizer for Bootstrap 4, I am forced ...
Upon updating to react-native 0.61, a plethora of warnings have started appearing: There are VirtualizedLists nested inside plain ScrollViews with the same orientation - it's recommended to avoid this and use another VirtualizedList-backed container ...
I am having trouble with resizing an image preview before submitting it. Despite setting the width and height to 1px in both the div and image, it still displays at its normal dimensions. $(function() { var imagesPreview = function(input, placeToIns ...
After researching various solutions, I came across a method to change the font color of all disabled fields by using the following code snippet: input[disabled=disabled] { /* your style */ color: #fff !important; } However, I have multiple disabled fie ...
I am working with a d3 matrix that has both an x and y-axis. However, my y-axis is quite long, so I want to ensure that the x-axis remains visible even when scrolling. I have tried setting the position attribute to 'fixed' using .style("position" ...
<div id="logo"><!-- logo --> <a href="index.php" id="ajax_link">My Site</a> </div><!-- end logo --> <?php if ($_SESSION['uid'] == "") { echo "<div id='main_menu' class='log&ap ...