Question

我设置了jquery ui标签，但我想添加一个向上滑动并向下滑动动画。目前，当您单击按钮时，它只会打开和关闭。如何将幻灯片效果添加到现有的jquery代码中？

jQuery(document).ready(function ($) {
    $(".tabs").tabs({
        collapsible: true,
        active: 'none'
    });
    return false;
});

Answer 1

以下是代码

HTML

 <ResourceDictionary...>
        <Style x:Key="SafetySystemButton" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            ***<Storyboard x:Key="FlashSafetyButton">
                                <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="ellipse">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.25"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>***
                        </ControlTemplate.Resources>
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        ...
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Unfocused"/>
                                    <VisualState x:Name="Focused">
                                        <Storyboard>...</Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Ellipse HorizontalAlignment="Center" Margin="0" Stroke="Black" VerticalAlignment="Center" StrokeThickness="0" MinWidth="70" MinHeight="70">
                                <Ellipse.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF5C5A5A" Offset="0.208"/>
                                        <GradientStop Color="White" Offset="1"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse HorizontalAlignment="Center" Margin="1" Stroke="Black" VerticalAlignment="Center" StrokeThickness="0" Fill="#FF5BA5B4" MinWidth="60" MinHeight="60"/>
                            <Ellipse x:Name="ellipse" HorizontalAlignment="Center" Margin="1" Stroke="Black" VerticalAlignment="Center" StrokeThickness="0" MinWidth="60" MinHeight="60">
                                <Ellipse.Fill>
                                    <RadialGradientBrush>
                                        <GradientStop Color="#FFFCFDFD"/>
                                        <GradientStop Color="#7F236172" Offset="1"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True"/>
                            <Trigger Property="IsPressed" Value="True"/>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- Resource dictionary entries should be defined here. -->
    </ResourceDictionary>

JS

<div class="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a>
    </li>
    <li><a href="#tabs-2">Tab 2</a>
    </li>
    <li><a href="#tabs-3">Tab 3</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Content for Tab 1</p>
  </div>
  <div id="tabs-2">
    <p>Content for Tab 2</p>
  </div>
  <div id="tabs-3">
    <p>Content for Tab 3</p>
  </div>
</div>
<div id="tabid"></div>

演示：https://jsfiddle.net/gpeczyff/1/

jquery ui tabs上滑效果

1 个答案: