Arunachalam Gurusamy Ответов: 0

Как применить эффект перехода в скрипте GridView expand/collapse

Я использую функцию Javascript для расширения / свертывания строк gridview. Ниже приведен сценарий.

<script type="text/javascript">
    function divexpandcollapse(divname) {
        var div = document.getElementById(divname);
        var img = document.getElementById('img' + divname);
        if (div.style.display == "none") {
            div.style.display = "inline";
            img.src = "Img1/minus.gif";
        } else {
            div.style.display = "none";
            img.src = "Img1/plus.gif";
        }
    }
</script>


В моем gridview я вызываю javascript вот так, он работает нормально, но сразу же расширяется. Я хочу медленно расширять панель. Как применить эффект перехода и к какому элементу мне нужно применить. Кто-нибудь может пожалуйста помочь мне...

<asp:TemplateField ItemStyle-Width="20px">
        <ItemTemplate>
            <a href="JavaScript:divexpandcollapse('div<%# Eval("ClaimMasterId") %>');">
                <img id='imgdiv<%# Eval("ClaimMasterId") %>' width="9px" border="0" src="Img1/plus.gif"

                    alt="" /></a>                        
        </ItemTemplate>
        <ItemStyle Width="20px" VerticalAlign="Middle"></ItemStyle>
    </asp:TemplateField>


Что я уже пробовал:

В промежутке между ItemTemplate я использовал div style= "transition-delay: 2s", но никакого эффекта

0 Ответов