beautypg.com

Using jquery effects in dreamweaver (cc) – Adobe Dreamweaver CC 2014 v.13 User Manual

Page 49

background image

Using jQuery effects in Dreamweaver (CC)

To the top

To the top

Spry effects are replaced with jQuery effects in Dreamweaver CC. While you can still modify existing spry effects on your page, you cannot add
new spry effects.

Add jQuery effects
Event-based jQuery effects
Remove jQuery effects

Add jQuery effects

1. In the Design or Code view of your Dreamweaver document, select the element to which you want to apply a jQuery effect.

2. Select Windows > Behaviors to open the Behaviors panel.

3. Click

, click Effects, and then click the required effect.

The customization panel with the settings for the selected effect appears.

4. Specify the settings, such as, the target element to which the effect is to be applied, and the duration for the effect.

The target element can be the same as the element you selected initially or a different element on the page. For example, if you want
users to click an element A to hide or show an element B, the target element is B.

5. To add multiple jQuery effects, repeat the steps above.

When you choose multiple effects, Dreamweaver applies the effects in the order they are displayed in the Behaviors panel. To change the
order of the effects, use the arrow keys at the top of the panel.

Dreamweaver automatically inserts the relevant code into your document. For example, if you have selected the 'Fade' effect, the following code
is inserted:

External file references for the dependent files that is required for jQuery effects to work:

The following code is applied to the element in the body tag:

  • Earth Forms
  • A script tag along with the following code is added:

    42

    This manual is related to the following products: