Smooth and right-shift webpage title links

The last time I posted an article "how to share the luminous effects of the LOGO on this site", I don't know how many kids shoes I 've used. I just shared my methods.

What I want to write today is to move the mouse over the title, the title is smooth and right shift effect, the effect can be viewed on my home page.

Are you still thinking that your page is not vivid enough? Let's take a look at the following tutorial!

The first method is jQuery.

Advantage: compatible with all browsers, including IE and others.

Disadvantage: the code is also very short and there are no disadvantages.

JQuery (document). ready (function ($ ){

$ ('. Entry-title A'). hover (function (){

// Change entry-title a to the style name of your title. You can apply multiple links separated by commas (,).

$ (This). stop (). animate ({'marginleft': '10px '}, 200 );

// The smooth effect of moving the mouse over the link. 200 is millisecond, which is the effect time. You can change it to the time needed.

}, Function (){

$ (This). stop (). animate ({'marginleft': '0px '}, 200 );

// Smooth effect after the mouse leaves the link, 200 same as above

});

});

First, let the topic load the jQuery library file. Now there are basically no topics not loaded, so the first step can be omitted.

(If you want to know whether the library file has been loaded, search for "jquery. min. js" in the source code on the webpage. If yes, it will be loaded .)

The second step is to paste the code into one of the JS files loaded by the topic, and then click OK.

The second method uses CSS3.

Advantages: the same effect, no advantages.

Disadvantage: it is not compatible with IE and will be moved right under IE, but it has no smooth effect, because IE does not support CSS3.

First, add the following CSS attributes to the label style of your title:

-Webkit-transition: margin 0.2 s transfer-out;

-Moz-transition: margin 0.2 s outgoing-out;

-Khtml-transition: margin 0.2 s transfer-out;

Add the following to a: hover:

Margin-left: 10px/* You can adjust the moving distance by yourself */

You can see the effect after modifying the preceding method. Both methods have the same effect, but the first method is compatible with all browsers. Therefore, the first method is recommended for small V-wall split.

Link: http://www.vsay.cn/share-this-station-title-link-moves-smoothly-to-the-right-effect.html